VueRouter
特点：通过路由和组件实现一个单页面的应用。
路由的注册：静态路由
Title
首页
课程
路由的注册：动态路由（路由的参数）
Title
首页
课程
用户1
用户2
路由的注册：自定义路由
Title
首页
课程
登录
路由的钩子函数：
Title
首页
课程
用户
登录
子路由的注册：静态路由
Title
首页
课程
课程详情
子路由的注册：动态路由
Title
首页
课程
课程详情
命名的路由视图
Title
首页
课程
用户
Vue的路由：
注册：
-- 定义一个匹配规则对象
let url = [
{
path:"/",
component:{}
}
]
-- 实例化VueRouter对象 并把匹配规则注册进去
let router = new VueRouter({
routes:url
})
-- 把VueRouter实例化对象注册到Vue的根实例
const app = new Vue({
el:""
})
-- router-link
-- router-view
子路由的注册
-- 在父路由里注册children：[{},{}]
-- 在父路由对应的组件里的template里写 router-link router-view
路由的名命
-- name
-- 注意 to 一定动态绑定 ：to=" {name:' '} "
路由的参数
this.$route.params.xxxx
this.$route.query.xxxx
自定义路由
this.$router.push("/course")
this.$router.push({name:' ', params:{ },query:{}})
路由的钩子函数
router.beforeEach(function(to, from, next){
to 路由去哪
from 路由从哪来
next 路由接下来要做什么
}) # 一般用于拦截
router.afterEach(function(to, from){
}) # 一般用于获取
注意
$route 路由的所有信息组成的对象
$router VueRouter 实例化对象
redirect 路由的重定向