目录
路由作用
功能引入
一级路由
二级路由的配置
路由作用
根据 url 锚点路径，在容器中加载不同的模块，本质作用是做页面导航
原理：
- 利用锚点完成切换
- 页面不会刷新
功能引入
- 官网：https://router.vuejs.org/zh/
- 下载：使用 vue-router.js 库来引入路由功能模块
一级路由
步骤：
1、引入 vue-router.js 库
<script type="text/javascript" src="../test_vue2/js/vue.js"></script>
<script type="text/javascript" src="../test_vue2/js/vue-router.js"></script>
数据准备
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script type="text/javascript" src="../test_vue2/js/vue.js"></script><script type="text/javascript" src="../test_vue2/js/vue-router.js"></script><style type="text/css">li {list-style-type: none;display: inline-block;margin: 20px 10px;}a {text-decoration: none;}.show {width: 300px;height: 200px;background: #ccc;}</style>
</head>
<body><body><div id="box"><ul><li><router-link to='/home'>home</router-link></li><li><router-link to='/news'>news</router-link></li><li><router-link to='/hot'>hot</router-link></li></ul><div class="show"><router-view></router-view></div></div></body>
</body>
<script>var vm = new Vue({el:'#box',data: {},});
</script>
</html>效果展示：
2、准备路由所需的模块（组件）
全局vue下，用extend（），用来注册路由所需的模块
var Home = Vue.extend({
template:'#home'
});
var News = Vue.extend({
template:'<h1>news</h1>'
});
var Hot = Vue.extend({
template:'<h1>hot</h1>'
});
3、配置路径信息
var routes = [
//{ path:'url' , component:组件名称 }
{ path: '/home',component: Home},
{ path: '/news',component: News },
{ path: '/hot',component: Hot },
]
4、创建路由对象
var route = new VueRoute({
//配置项
//routes:存储路径信息的数组
routes
})
5、在vue中添加路由配置项
var vm = new Vue({
el: "#box",
data: {},
//添加路由配置项
//router：路由对象
router:router
});
实现效果： 点击不同标签，下方阴影弹出不同的文字。
路由重定向：
通过 $router 找到路由对，通过 push() 方法实现跳转。
方式一：
router.push('/home');
方式二：
beforeCreate: function() {
// 通过注入路由器，我们可以在任何组件内通过 this.$router 访问路由器
this.$router.push('/home');
},
二级路由的配置
在配置路径信息中配置二级信息，在一级路由配置中添加 children 配置项即可。
eg： { path: '/news',component: News },
{
path: "/news",
component: News,
children: [
// 二级路由，path分配，前面不要有/
{
path: "film",
component: {
template: "<p>电影：绣春刀，战狼二</p>",
},
},
{
path: "tv",
component: {
template: "<p>四重奏，信号，春风十里不如你</p>",
},
},
{
//默认情况下重定向到某个组件下
path: "/",
redirect: "film",
},
],
},
