Vue Router简介
- 它是一个Vue.js官方提供的路由管理器。是一个功能更加强大的前端路由器，推荐使用。
- Vue Router和Vue.js的核心深度集成，因此非常契合，可以一起方便的实现SPA单页应用程序的开发。
- Vue Router依赖于Vue，所以需要先引入Vue，再引入Vue Router
Vue Router的特性：
- 支持H5历史模式或者hash模式
- 支持嵌套路由
- 支持路由参数
- 支持编程式路由
- 支持命名路由
- 支持路由导航守卫
- 支持路由过渡动画特效
- 支持路由懒加载
- 支持路由滚动行为
Vue Router的使用步骤(★★★)
<script src="./js/vue.js"></script>
<script src="./js/vue-router_3.0.2.js"></script>
在html中
- A.导入js文件和为全局window对象挂载VueRouter构造函数
<script src="./js/vue.js"></script>
<script src="./js/vue-router_3.0.2.js"></script>
- B.添加路由链接 <router-link>是vue中提供的标签，默认会被渲染为a标签， to属性默认被渲染为href属性， to属性的值会被渲染为#开头的hash地址
<a href='#user'>user</a>
<router-link to="/user">User</router-link> //与a标签等效
<router-link to="/login">Login</router-link>
对应关系：
- C.添加路由填充位（路由占位符） 最后路由展示的组件就会在占位符的位置显示
<component></component>
<router-view></router-view> //与上边等效
在js中：
- D.定义路由组件
#定义组件
var User = {
template:"<div>This is User</div>"
}
var Login = {
template:"<div>This is Login</div>"
}
- E.配置路由规则并创建路由实例,类似于Vue实例
var myRouter = new VueRouter({
//routes是路由规则数组
routes:[
//每一个路由规则都是一个对象，对象中至少包含path和component两个属性
//path表示 路由匹配的hash地址，component表示路由规则对应要展示的组件对象
{path:"/user",component:User},
{path:"/login",component:Login}
]
})
- F.将路由挂载到Vue实例中
var vm = new Vue({
el:'#app',
//通过router属性挂载路由对象
router:myRouter
})
补充：
路由重定向：可以通过路由重定向为页面设置默认展示的组件 在路由规则中添加一条路由规则即可，如下：
var myRouter = new VueRouter({
//routes是路由规则数组
routes: [
//path设置为/表示页面最初始的地址 / ,redirect表示要被重定向的新地址，设置为一个路由即可
{ path:"/", redirect:"/user"},
{ path: "/user", component: User },
{ path: "/login", component: Login }
]
})
那么一个用VueRouter的搭建的小案例实现了
运行：
默认显示页面：
点击login：
嵌套路由的概念
当我们进行路由的时候显示的组件中还有新的子级路由链接以及内容。
嵌套路由最关键的代码在于理解子级路由的概念： 比如我们有一个/login的路由 那么/login下面还可以添加子级路由，如:
- /login/account
- /login/phone
<body>
<div id="app">
<!-- 路由链接 -->
<router-link to="/user">User</router-link>
<router-link to="/login">Login</router-link>
<!--占位符 -->
<router-view></router-view>
</div>
<!-- login的模板 -->
<template id="login">
<div>
<h1>This is Login</h1>
<hr>
<router-link to="/login/account">账号密码登录</router-link>
<router-link to="/login/phone">扫码登录</router-link>
<router-view></router-view>
</div>
</template>
<script>
//定义组件
var User = {
template:"<div>This is User</div>"
}
var Login = {
template:'#login'
}
//定义login子路由的组件
var account = {template: "<div>账号：<input><br>密码：<input></div>"};
var phone = {template: "<h1>扫我二维码</h1>"};
//路由实例
var myRouter = new VueRouter({
//routes是路由规则数组
routes:[
{ path:"/", redirect:"/user"},
{path:"/user",component:User},
{
path:"/login",
component:Login,
//定义子路由
children: [
{path: "/login/account", component: account},
{path: "/login/phone", component: phone},
]
}
]
})
var vm = new Vue({
el:'#app',
//通过router属性挂载路由对象
router:myRouter
})
</script>
</body>
思路：首先用户点击Login时，通过to属性的值到路由实例中的定义路由规则匹配
找到之后通过component显示相应的组件模板，填充占位符。
结果显示：
在该模板中又定义了两个路由和一个占位符，当用户点击某个路由后，再次通过该路由的to属性到路由规则数组中匹配，(因为是子路由，所以直接在父路由的children中寻找匹配)
找到后，显示组件模板。填充到占位符中。
动态路由
动态路由就是路由链接的to属性的值是动态变化的，
在路由实例的规则数组中进行统一获取,并可以对该值进行操作或显示到该路由指向的组件模板中。
<!-- 动态路由 -->
<body>
<div id="app">
<!-- 路由链接 -->
<router-link to="/user/22">User</router-link>
<router-link to="/login">Login</router-link>
<!--占位符 -->
<router-view></router-view>
</div>
<script>
//定义组件
var User = {
template:"<div>User is {{ $route.params.id }}</div>"
}
var Login = {
template:"<div>This is Login</div>"
}
//路由实例
var myRouter = new VueRouter({
//routes是路由规则数组
routes:[
//path设置为/表示页面最初始的地址 / ,redirect表示要被重定向的新地址，设置为一个路由即可
{ path:"/", redirect:"/user"},
//每一个路由规则都是一个对象，对象中至少包含path和component两个属性
//path表示 路由匹配的hash地址，component表示路由规则对应要展示的组件对象
{path:"/user/:id",component:User},
{path:"/login",component:Login}
]
})
var vm = new Vue({
el:'#app',
//通过router属性挂载路由对象
router:myRouter
})
</script>
</body>
解析：
User的路由链接to属性的值为：
怎么获取这个值呢？，到路由规则数组中进行匹配：
我们发现修改他的path值为
'/user/:id'
即可获取id(id为随便取的名字，可以为pid，bid等)
怎么在其指向的组件模板中显示该获取的id值？
在模板中通过插值的方式----{{$router.params.id}}进行获取。
{{$router.params.id}}
运行：
点击User后，显示id值
可以在路由对应的组件中使用$route.params.id来获取路径传参的id参数值，但是这种方式不够灵活。今后可以尽量使用props将组件和路由解耦。
1.通过props来接收参数
html中的路由链接不变，改变路由规则数组和定义组件
//定义组件
var User = {
props: ['id'], //使用props接收id参数
template:"<div>User is {{ id }}</div>"
}
//路由实例
var myRouter = new VueRouter({
routes:[
//通过/:参数名 的形式传递参数
// {path:"/user/:id",component:User},
//如果props设置为true，route.params将会被设置为组件属性
{path:"/user/:id",component:User,props: true},
]
})
运行：
2.还有一种情况，我们可以将props设置为对象，直接将静态数据传递给组件进行使用。 但是这样id的值就访问不到了。
var User = {
props:["username","pwd"],
template:"<div>用户：{{username}}---{{pwd}}</div>"
}
var myRouter = new VueRouter({
//routes是路由规则数组
routes: [
//通过 /:参数名 的形式传递参数
//如果props设置为对象，则传递的是对象中的数据给组件
{ path: "/user/:id", component: User, props:{username:"jack",pwd:123} },
]
})
可以访问到props的数据，但是path中的id访问不到。
3.如果既想要获取路由传递的参数值，又想获取传递的对象数据，那么props应该设置为函数形式。
var User = {
props: ['id','username','password'], //使用props接收id参数
template:"<div>User is--{{username}}---{{password}}---{{ id }}</div>"
}
//路由实例
var myRouter = new VueRouter({
routes:[
//如果props设置为函数，则通过函数的第一个参数获取路由对象
//并可以通过路由对象的params属性获取传递的参数
{path:"/user/:id",component:User,props:function(route){
return { username:'lizhao',
password:'123456',
id:route.params.id
}
}
},
]
})
运行：
网友评论