1.路由的概念
路由分为后端路由和前端路由。
1.后端路由：由服务器端进行实现，并完成资源的分发。
2.前端路由：依靠hash值(锚链接)的变化进行实现；根据不同的事件来显示不同的页面内容，即事件与事件处理函数之间的对应关系。
2.Vue-Router的使用
步骤：
- 引入js文件，vue-router.js需要依赖vue.js文件。
- 添加路由链接:是路由中提供的标签，默认会被渲染为a标签，to属性默认被渲染为href属性，to属性的值会被渲染为#开头的hash地址。
- 添加路由填充位（路由占位符） -----router-view
- 定义路由组件
- 配置路由规则并创建路由实例
- 将路由挂载到Vue实例中
代码示例：
<body>
<!-- 被 vm 实例所控制的区域 -->
<div id="app">
<router-link to="/user">User</router-link>
<router-link to="/register">Register</router-link>
<!-- 路由占位符 -->
<router-view></router-view>
</div>
<!-- 导入 vue 文件 -->
<script src="./lib/vue_2.5.22.js"></script>
<script src="./lib/vue-router_3.0.2.js"></script>
<script>
const User = {
template: '<h1>User 组件</h1>'
}
const Register = {
template: '<h1>Register 组件</h1>'
}
// 创建路由实例对象
const router = new VueRouter({
// 所有的路由规则
routes: [
{
path: '/user', component: User },
{
path: '/register', component: Register }
]
})
// 创建 vm 实例对象
const vm = new Vue({
// 指定控制的区域
el: '#app',
data: {
},
// 挂载路由实例对象
// router: router
router
})
</script>
3.嵌套路由
进行路由的时候显示的组件中还有新的子级路由链接以及内容，这就成为路由的嵌套。
<body>
<!-- 被 vm 实例所控制的区域 -->
<div id="app">
<router-link to="/user">User</router-link>
<router-link to="/register">Register</router-link>
<!-- 路由占位符 -->
<router-view></router-view>
</div>
<script>
const User = {
template: '<h1>User 组件</h1>'
}
const Register = {
template: `<div>
<h1>Register 组件</h1>
<hr/>
<!-- 子路由链接 -->
<router-link to="/register/tab1">tab1</router-link>
<router-link to="/register/tab2">tab2</router-link>
<!-- 子路由的占位符 -->
<router-view />
<div>`
}
const Tab1 = {
template: '<h3>tab1 子组件</h3>'
}
const Tab2 = {
template: '<h3>tab2 子组件</h3>'
}
// 创建路由实例对象
const router = new VueRouter({
// 所有的路由规则
routes: [{
path: '/',
redirect: '/user'
}, {
path: '/user',
component: User
},
// children 数组表示子路由规则
{
path: '/register',
redirect: '/register/tab1',
component: Register,
children: [{
path: '/register/tab1',
component: Tab1
}, {
path: '/register/tab2',
component: Tab2
}]
}
]
})
// 创建 vm 实例对象
const vm = new Vue({
// 指定控制的区域
el: '#app',
data: {
},
// 挂载路由实例对象
// router: router
router
})
</script>
4.动态路由匹配
- 可以使用$router.params的方法获取相应的参数。
- 通过props获取参数，props为true、对象、函数时代表不同的含义。
- props为true时 在子组件中可以通过props属性直接获取相应的传递数据。 形如：[‘id’]
- props为对象时，子组件中可以获取传递对象中的对应属性值。形如：[‘name’,‘age’]
- props为函数时，子组件中可以获取所有传递过去的值。形如：[‘id’, ‘uname’, ‘age’]
<!-- 被 vm 实例所控制的区域 -->
<div id="app">
<router-link to="/user/1">User1</router-link>
<router-link to="/user/2">User2</router-link>
<router-link to="/user/3">User3</router-link>
<router-link to="/register">Register</router-link>
<!-- 路由占位符 -->
<router-view></router-view>
</div>
<script>
const User = {
props: ['id', 'uname', 'age'],
template: '<h1>User 组件 -- 用户id为: {
{id}} -- 姓名为:{
{uname}} -- 年龄为：{
{age}}</h1>'
}
const Register = {
template: '<h1>Register 组件</h1>'
}
// 创建路由实例对象
const router = new VueRouter({
// 所有的路由规则
routes: [
{
path: '/', redirect: '/user' },
{
path: '/user/:id',
component: User,
props: route => ({
uname: 'zs', age: 20, id: route.params.id })
},
{
path: '/register', component: Register }
]
})
// 创建 vm 实例对象
const vm = new Vue({
// 指定控制的区域
el: '#app',
data: {
},
// 挂载路由实例对象
// router: router
router
})
</script>
5.命名路由
在命名规则中通过name属性给对应路由命名。
<!-- 被 vm 实例所控制的区域 -->
<div id="app">
<router-link to="/user/1">User1</router-link>
<router-link to="/user/2">User2</router-link>
<router-link :to="{ name: 'user', params: {id: 3} }">User3</router-link>
<router-link to="/register">Register</router-link>
<!-- 路由占位符 -->
<router-view></router-view>
</div>
<script>
const User = {
props: ['id', 'uname', 'age'],
template: '<h1>User 组件 -- 用户id为: {
{id}} -- 姓名为:{
{uname}} -- 年龄为：{
{age}}</h1>'
}
const Register = {
template: '<h1>Register 组件</h1>'
}
// 创建路由实例对象
const router = new VueRouter({
// 所有的路由规则
routes: [
{
path: '/', redirect: '/user' },
{
// 命名路由
name: 'user',
path: '/user/:id',
component: User,
props: route => ({
uname: 'zs', age: 20, id: route.params.id })
},
{
path: '/register', component: Register }
]
})
// 创建 vm 实例对象
const vm = new Vue({
// 指定控制的区域
el: '#app',
data: {
},
// 挂载路由实例对象
// router: router
router
})
</script>
6.编程式导航
导航的方式有两种：
1.声明式导航：通过点击链接的方式实现的导航
2.编程式导航：调用js的api方法实现导航
Vue-Router中常见的导航方式：
this.$router.push("hash地址");
this.$router.push("/login");
this.$router.push({
name:'user' , params: {
id:123} });
this.$router.push({
path:"/login" });
this.$router.push({
path:"/login",query:{
username:"jack"} });
this.$router.go( n );//n为数字，参考history.go
this.$router.go( -1 );