本文已参与「新人创作礼」活动，一起开启掘金创作之路。
3.Vue Router简介
它是一个Vue.js官方提供的路由管理器。是一个功能更加强大的前端路由器，推荐使用。 Vue Router和Vue.js非常契合，可以一起方便的实现SPA(single page web application,单页应用程序)应用程序的开发。 Vue Router依赖于Vue，所以需要先引入Vue，再引入Vue Router
Vue Router的特性： 支持H5历史模式或者hash模式 支持嵌套路由 支持路由参数 支持编程式路由 支持命名路由 支持路由导航守卫 支持路由过渡动画特效 支持路由懒加载 支持路由滚动行为
4.Vue Router的使用步骤(★★★)
A.导入js文件
B.添加路由链接:是路由中提供的标签，默认会被渲染为a标签，to属性默认被渲染为href属性， to属性的值会被渲染为#开头的hash地址 User Login C.添加路由填充位（路由占位符） D.定义路由组件 var User = { template:"
小结： Vue Router的使用步骤还是比较清晰的，按照步骤一步一步就能完成路由操作 A.导入js文件 B.添加路由链接 C.添加路由占位符(最后路由展示的组件就会在占位符的位置显示) D.定义路由组件 E.配置路由规则并创建路由实例 F.将路由挂载到Vue实例中
补充： 路由重定向：可以通过路由重定向为页面设置默认展示的组件 在路由规则中添加一条路由规则即可，如下： var myRouter = new VueRouter({ //routes是路由规则数组 routes: [ //path设置为/表示页面最初始的地址 / ,redirect表示要被重定向的新地址，设置为一个路由即可 { path:"/",redirect:"/user"}, { path: "/user", component: User }, { path: "/login", component: Login } ] })
5.嵌套路由，动态路由的实现方式
A.嵌套路由的概念(★★★)
当我们进行路由的时候显示的组件中还有新的子级路由链接以及内容。
嵌套路由最关键的代码在于理解子级路由的概念： 比如我们有一个/login的路由 那么/login下面还可以添加子级路由，如: /login/account /login/phone
参考代码如下：
var User = { template: "<div>This is User</div>" }
//Login组件中的模板代码里面包含了子级路由链接以及子级路由的占位符
var Login = { template: `<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></router-view>
</div>` }
//定义两个子级路由组件
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属性为/login添加子路由规则
children:[
{ path: "/login/account", component: account },
{ path: "/login/phone", component: phone },
]
}
]
})
var vm = new Vue({
el: '#app',
data: {},
methods: {},
router:myRouter
});
页面效果大致如下：
B.动态路由匹配(★★★)
var User = { template:"
var myRouter = new VueRouter({ //routes是路由规则数组 routes: [ //通过/:参数名 的形式传递参数 { path: "/user/:id", component: User },
]
})
