先看看路由是什么：
一、效果图
在普通HTML里上面一行是超链接a标签，下面是frame标签
换成Vue的话，上面是router-link标签，下面是router-view标签
简单的来说，路由就是超链接
二、Vue-Router成型代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="js/vue-router.js"></script>
</head>
<body>
<div id="app">
<div>
<router-link to="/a">首页</router-link>
<router-link to="/b">消息</router-link>
<router-link to="/c">商品</router-link>
</div>
<div>
<router-view></router-view>
</div>
</div>
<script type="text/javascript">
const a = {template:`<div>一个首页</div>`};
const b = {template:`<div>一堆消息</div>`};
const c = {template:`<div>一堆商品</div>`};
const routes=[
{path:'/a',component:a},
{path:'/b',component:b},
{path:'/c',component:c}
];
const myrouter = new VueRouter({
routes
});
var vm = new Vue({
el:"#app",
router:myrouter
})
</script>
</body>
</html>
三、代码组成部分
第4步可以写到第5步里面
const router = new VueRouter({
routes:[
{path:"/a",component:a}
]
});四、动态匹配
1、匹配参数
如果带有参数的话，可以在第4步里写上:id
const routes=[
{path:'/d/:id',component:d},
],然后在第2步显示内容的时候，就可以用 {{$route.params.id}} 获取这个动态参数id
const d = {template:`<div>商品的id：{{$route.params.id}}</div>`};2、匹配剩余所有页面
用/*可以匹配所有页面，把它放在匹配路由的最后，就会做先匹配上面的，剩余的全部匹配
const routes=[
{path:'/a',component:a},
{path:'/b',component:b},
{path:'/c',component:c},
{path:'/*',component:d},
];上面这段代码，按顺序会优先匹配a，b，c，其余的就会匹配到/*，并显示组件d
3、匹配优先级
按定义顺序，上面代码的优先级别就是a>b>c>*
五、组件嵌套
组件嵌套只需要在路由关系里加一项children就行，这里要注意：aa前面没有/
const routes=[
{
path:'/a',
component:a,
children:[
{path:'aa',component:aa},
{path:'bb',component:bb},
]
},
{path:'/b',component:b},
{path:'/c',component:c},
];请求的时候用 <router-link to="/a/bb">子页bb</router-link>
完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="js/vue-router.js"></script>
</head>
<body>
<div id="app">
<div>
<router-link to="/a">首页</router-link>
<router-link to="/a/aa">子页aa</router-link>
<router-link to="/a/bb">子页bb</router-link>
<router-link to="/b">消息</router-link>
<router-link to="/c">商品</router-link>
</div>
<div >
<router-view></router-view>
</div>
</div>
<script type="text/javascript">
const a = {
template:
`
<div>
一个首页
<hr>
<router-view></router-view>
</div>
`,
};
const b = {template:`<div>一堆消息</div>`};
const c = {template:`<div>一堆商品</div>`};
const aa = {template:`<div>子组件aaa哦</div>`};
const bb = {template:`<div>子组件bbb哦</div>`};
const routes=[
{
path:'/a',
component:a,
children:[
{path:'aa',component:aa},
{path:'bb',component:bb},
]
},
{path:'/b',component:b},
{path:'/c',component:c},
];
const myrouter = new VueRouter({
routes
});
var vm = new Vue({
el:"#app",
router:myrouter
})
</script>
</body>
</html>
效果图
六、编程式导航
<router-link to="/a">首页</router-link> ===> $router.push("a")
这个$route就是我们第四步定义的对象myrouter
使用时就可以这样写
methods:{
toindex(){
myrouter.push("/a")
}
}除了push之外，还有replace和go
replace和push功能一样，只是没有历史纪录了,go的参数是整数，表示前进或者后退几步
先用push和go写一段代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="js/vue-router.js"></script>
</head>
<body>
<div id="app">
<div>
<!-- <router-link to="/a">首页</router-link> -->
<button @click="toindex">首页1</button>
<!-- <router-link to="/b">消息</router-link> -->
<button @click="tob">消息2</button>
<!-- <router-link to="/c">商品</router-link> -->
<button @click="toc">商品3</button>
<!-- 前面一步 -->
<button @click="goforward">前进</button>
<!-- 后退一步 -->
<button @click="goback">后退</button>
</div>
<div >
<router-view></router-view>
</div>
</div>
<script type="text/javascript">
const a = {template:`<div>一个首页1</div>`};
const b = {template:`<div>一堆消息2</div>`};
const c = {template:`<div>一堆商品3</div>`};
const routes=[
{path:'/a',component:a},
{path:'/b',component:b},
{path:'/c',component:c},
];
const myrouter = new VueRouter({
routes
});
var vm = new Vue({
el:"#app",
router:myrouter,
methods:{
toindex(){
myrouter.push("/a")
},
tob(){
myrouter.push("/b")
},
toc(){
myrouter.push("/c")
},
goforward(){
myrouter.go(1)
},
goback(){
myrouter.go(-1)
}
}
})
</script>
</body>
</html>
看运行效果，主要是左上角浏览器的方向键可以使用，因为有历史浏览记录，go的作用就是前面和后退，但是参数除了1和-1，还可以写任意整数，当然，如果没那么多浏览纪录的话，就什么也不显示了
再来一个replace和go的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="js/vue-router.js"></script>
</head>
<body>
<div id="app">
<div>
<!-- <router-link to="/a">首页</router-link> -->
<button @click="toindex">首页1</button>
<!-- <router-link to="/b">消息</router-link> -->
<button @click="tob">消息2</button>
<!-- <router-link to="/c">商品</router-link> -->
<button @click="toc">商品3</button>
<!-- 前面一步 -->
<button @click="goforward">前进</button>
<!-- 后退一步 -->
<button @click="goback">后退</button>
</div>
<div >
<router-view></router-view>
</div>
</div>
<script type="text/javascript">
const a = {template:`<div>一个首页1</div>`};
const b = {template:`<div>一堆消息2</div>`};
const c = {template:`<div>一堆商品3</div>`};
const routes=[
{path:'/a',component:a},
{path:'/b',component:b},
{path:'/c',component:c},
];
const myrouter = new VueRouter({
routes
});
var vm = new Vue({
el:"#app",
router:myrouter,
methods:{
toindex(){
myrouter.replace("/a")
},
tob(){
myrouter.replace("/b")
},
toc(){
myrouter.replace("/c")
},
goforward(){
myrouter.go(1)
},
goback(){
myrouter.go(-1)
}
}
})
</script>
</body>
</html>
运行时，浏览器左上角的方向键都不能用，go也不能使用，因为replace没有浏览纪录
七、命名路由
就是在路由对应关系中，加一个name属性
{path:'/a',name:'jack', component:a}使用时用对象
<router-link :to="{name:'jack'}">首页</router-link>八、命名视图
跟命名路由一样，给视图加一个name属性，这样可以让一个路由对应多个视图
视图加name:
<div >
<router-view></router-view>
<router-view name="viewa"></router-view>
<router-view name="viewb"></router-view>
</div>路由加对应关系，这里的component有个s,因为有多个视图
const routes=[
{path:'/a',component:a},
{
path:'/b',
components:{
default:a,
viewa:b,
viewb:c,
}
},
];运行效果
九、重定向和别名
1、重定向
在路由对应关系里直接写/b，这样访问/a就会直接重定向到/b的内容
{path:'/a',redirect:'/b'}
2、别名
这个别名的用处和重定向差不多
{path:'/a',redirect:'/b'}/a重定向到/b时，访问a，打开b
{path:'/a',component:aa,alias:'/b'}/a的别名为/b时，访问a，打开a，访问b，也打开a
a有别名时，自己不受影响，而是影响到了“别名”
十、路由组件传参
1、用$route传参
在路由对应关系中，使用 /a/:id 来传参
在显示组件中，使用 {{$route.params.id}} 来取参
2、用props来传参
可以和$route解耦
在路由关系里增加props属性，在显示模板里用props来表示属性
Vue路由的基本使用内容就这些了
进阶内容可以参考：Vue路由官方文档
1996
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
