Vue-Router（五）

前端路由的原理

改变url地址并不重新发请求。而是通过前端路由监控改变组件。


只改变url地址，不会重新请求数据刷新页面。
1.URL的hash
location.hash = ‘home’
HTML5的history模式
history.pushState({},’’,‘home’)
history.replaceState({},’’,‘home’)
【注意上述2者的区别】
history.back()==history.go(-1)
history.forward()==history.go(1)
history.go()

Vue.use(插件)

调用Vue的use(插件)，会去执行插件.install()方法。
Vue.use(VueRouter)会执行VueRouter.install()。其中逻辑有注册了2个组件。
Vue.component('RouterLink',xxx)
Vue.component('RouterView',xxx)
这里有个约定俗成的写法。虽然组件注册的名称是大写驼峰。但是使用的时候全是小写，驼峰变"-"

1.<router-link>该标签是一个vue-router中已经内置的组件，它最终会被渲染成<a>标签
2.<router-view>

const router = new VueRouter({
routes,
mode: ‘history’
linkActiveClass: ‘active’ //了解，一般用不上
})

<router-link to="/home">首页</router-link>
其他属性：
tag:指定<router-link>之后渲染成什么html元素。默认是<a>
replace:相当于history.replaceState()
active-class:当有多个<router-link>时，默认处于选中状态的<router-link>会被添加class="router-link-active"，你可以自定义class="router-link-active"样式。你也可以主动修改router-link-active的名字为其他名字（上面的linkActiveClass: 'active’就是批量把所有的都改掉）。一般用不上。

this.$router.push()/this.$router.replace()

动态路由

const routes = [
{
path: ‘/user/:id’,
component: User
}
]

this.$router和this.$route的区别

打包后的文件的解析

app.xxx.js是我们自己写的js
manifest.xxx.js是底层支撑代码。比如webpack的代码
vendor.xxx.js是第三方代码。比如vue.js

路由懒加载

一个路由打包一个js文件。
写法：
const routes = [
{//普通写法
path: ‘/about’,
component: About
}
{//懒加载写法
path: ‘/user/:id’,
component: () => import(’…/components/User’)
}
]

嵌套路由

参数传递

params和query

导航守卫

全局导航守卫：beforeEach()和afterEach()
路由独享的守卫和组件内的守卫等。
详细知识可查看vue-router的官网

keep-alive

注意：只有被keep-alive标签包裹的组件，才有activated和deactivated这两个钩子回调函数。


两个重要的属性。include和exclude。值是组件的name属性(一个是router的index.js中定义路由时可以写name属性【未验证，我猜的】，还有就是定义组件的时候可以写name属性。)