<div id="app">
<router-link to="/home">home</router-link>
<router-link to="/list">list</router-link>
<router-link to="/user">user</router-link> <router-view></router-view>
</div>
<script>
let router = new VueRouter({
routes:[
{
path: '/home',
name: 'Home',
component: {
template:'<div>home</div>'
},
},
{
path: '/list',
name: 'List',
component: {
template: '<div>list</div>'
}
},
{
path: '/user',
name:'User',
component: {
template: '<div>user</div>'
}
}
]
});
let app = new Vue({
el:'#app',
router,
})
</script>

Vue的router使用的更多相关文章

  1. 三、vue之router

    三.vue之router 此时vue的脚手架.创建项目已经完成. ... vue的运行流程 index.html-->main.js-->App.vue-->router/index ...

  2. Vue中router两种传参方式

    Vue中router两种传参方式 1.Vue中router使用query传参 相关Html: <!DOCTYPE html> <html lang="en"> ...

  3. 四 Vue学习 router学习

    index.js: 按需加载组件: const login = r => require.ensure([], () => r(require('@/page/login')), 'log ...

  4. vue 中router.go;router.push和router.replace的区别

    vue 中router.go:router.push和router.replace的区别:https://blog.csdn.net/div_ma/article/details/79467165 t ...

  5. 【vue】 router.beforeEach

    import store from '@/store' const Vue = require('vue') const Router = require('vue-router') Vue.use( ...

  6. vue & this.$router.resolve

    vue & this.$router.resolve gotoAutoUpdate (query = {}) { const { href } = this.$router.resolve({ ...

  7. Vue中router路由的使用、router-link的使用(在项目中的实际运用方式)

    文章目录 1.先看router中的index.js文件 2.router-link的使用 3.实现的效果 前提:router已经安装 1.先看router中的index.js文件 import Vue ...

  8. vue中$router.push打开新窗口

    在vue中使用 this.$router.push({ path:  '/home' }) 默认是替代本窗口 如果想新开一个窗口,可以使用下面的方式: let routeData = this.$ro ...

  9. vue之router钩子函数

    模块一:全局导航钩子函数 1.vue router.beforeEach(全局前置守卫) beforeEach的钩子函数,它是一个全局的before 钩子函数, (before each)意思是在 每 ...

  10. vue 的router的简易运用

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. 一次ASM磁盘空间假装耗尽 ORA-15041: DISKGROUP SPACE EXHAUSTED

    给ASM磁盘新增一块盘进去,ASM_DISK2剩余空间四百多G: SQL> select * from v$asm_diskgroup;   GROUP_NUMBER NAME         ...

  2. 关于npm --save还是-save的横岗数量的细节的记录

    最近又开始鼓捣npm了,所以得稍微记录一下. 首先是npm install xxx --save 和 npm install xxx -save这两的区别(注意加粗的部分,横杠数不一样).当我搜索-- ...

  3. PAT A1113 Integer Set Partition (25 分)——排序题

    Given a set of N (>1) positive integers, you are supposed to partition them into two disjoint set ...

  4. Echo团队Alpha冲刺随笔 - 第六天

    项目冲刺情况 进展 开始着手服务器部署.小程序改了几个BUG,WEB端完成接近一半,后端主体功能大致完成 问题 服务器反向代理有点问题 心得 Learning By Doing! 今日会议内容 黄少勇 ...

  5. golang 转换markdown文件为html

    使用blackfriday go get -u gopkg.in/russross/blackfriday.v2 go: package markdown import ( "fmt&quo ...

  6. 一个比较变态的js传值,Query的bind、ajax闭包、上下文传值

    var getIDNameList = function (list, selected, text, btn, actionUrl, defaultKey, deleteKey, keyName, ...

  7. Auto-ML之自动化特征工程

    1. 引言 个人以为,机器学习是朝着更高的易用性.更低的技术门槛.更敏捷的开发成本的方向去发展,且Auto-ML或者Auto-DL的发展无疑是最好的证明.因此花费一些时间学习了解了Auto-ML领域的 ...

  8. zjoi2018 day1游记

    咕咕咕 upd:看见有人贴上zhihu的问题,那个我早就看到了... 谴责一番题主 @gzy_cjoier 阅读量马上700没想到吧 既然这么火我挂个广告吧 永别,OI 听说有人催更??

  9. BodeAbp概述

    BodeAbp框架基于github开源框架ASP.NET Boilerplate,abp项目地址:https://github.com/aspnetboilerplate/aspnetboilerpl ...

  10. 如何在《救赎之路》中使用CPU粒子效果

    Unreal游戏引擎4.19版本的发布,可以使得游戏可以更好地利用Intel多核心处理器的性能,以提供更精彩的游戏体验.这里以<救赎之路>这款优秀的国产独立游戏为例说明如何在游戏中使用CP ...