1. 引入vue和vue-router
安装vue-router: npm i -S vue-router
<!-- 引入 vue.js -->
<script src="./vue.js"></script>
<!-- 引入 vue-router.js , 注意:vue-router 是vue的插件, 所以,在使用路由之前先引入vue.js-->
<script src="./node_modules/vue-router/dist/vue-router.js"></script>
2. 创建两个组件
var Home = {
template: '<h1>首页</h1>'
}
var Vip = {
template: '<h1>会员</h1>'
}
3. 配置路由规则(创建路由实例)
var router = new VueRouter({
// 通过 routes 配置项来配置路由
routes: [
{ path: '/home', component: Home },
{ path: '/vip', component: Vip },
]
})
4. 路由实例与Vue实例关联
// 是Vue配置项
router: router
5. 链接导航
<!-- router-link 组件是由 vue-router 库提供的, 将来这个组件会被编译为 a标签 -->
<!-- to 属性的值, 与 路由实例中 的path 属性相匹配 -->
<router-link to="/home">首页</router-link>
<router-link to="/vip">会员</router-link>
6. 路由出口
<!-- 通过 router-view 组件, 来指定路由内容展示在页面中的位置 -->
<router-view></router-view>
7. 路由重定向
// 路由配置中添加配置(默认首页)
{ path: '/', redirect: '/home' },
导航高亮
<style>
.router-link-exact-active, .router-link-active {
color: red;
font-size: 30px;
}
</style>
路由参数
设置带参数路由
// 匹配/home/XXX
{ path: '/home/:参数名', component: Home }
// 带查询参数和哈希值
<router-link to="/user/xxx?age=18&gender=female#a=b">小红</router-link>
获取参数
$route.params.id
//也可以通过 $route.query 获取到 URL 中的查询参数
// 通过$route.hash 获取URL中的哈希值
监视路由
// 为了监视到路由参数的变化,通过 watch 监视$route
watch: {
$route(to, from) {
// 对路由变化作出响应...
// to 或 from 是匹配的路由对象,对象中包含了参数信息等
console.log(from); // 前一路由信息(对象)
console.log(to.params.name); // 当前路由参数值
}
}
嵌套路由
var router = new VueRouter({
routes: [{
path: '/user',
component: User,
// 子路由规则
children: [
{
path: 'profile',
component: UserProfile
},
{
path: 'posts',
// 如果子路由的path中添加了/,那么路由对应的路径就变为:绝对路径了,将来这个path就不会再与 /user 拼接到一起,
// 直接在 浏览器地址栏中访问 #/posts 就可以了
// path: '/posts',
component: UserPosts
}
]
}]
})
说明:
子路由的链接和出口放到父路由组件模板中