七、Vue-router

vue-router基础

1. 认识vue-router
   vue-router是基于路由和组件的
    • 路由用于设定访问路径, 将路径和组件映射起来.
    • 在vue-router的单页面应用中, 页面的路径的改变就是组件的切换
2. 安装
   步骤一: 安装vue-routernpm install vue-router --save
   步骤二: 在模块化工程中使用它（因为是一个插件, 所以可以通过Vue.use()来安装路由功能）
    • 第一步：导入路由对象，并且调用 Vue.use(VueRouter)
    • 第二步：创建路由实例，并且传入路由映射配置
    • 第三步：在Vue实例中挂载创建的路由实例

/***router里的index.js***/
import Vue from 'vue'
import Router from 'vue-router' // 1.导入路由对象
import HelloWorld from '@/components/HelloWorld'

//1.安装vue-router插件
Vue.use(Router)

//2.创建Router对象实例
export default new Router({
//配置路由和组件之间的映射关系
 routes: [
  {
   path: '/',
   name: 'HelloWorld',
   component: HelloWorld
  }
 ]
})

//3.将Router对象传入到Vue实例
//第九行的export导出

/***main.js***/
import Vue from 'vue'
import App from './App'
import router from './router' //导入

Vue.config.productionTip = false

new Vue({
 el: '#app',
 router, //挂载到vue实例中
 render: h => h(App)
})

3. 使用
   第一步: 创建路由组件
   第二步: 配置路由映射: 组件和路径映射关系
   第三步: 使用路由: 通过<router-link>和<router-view>
<router-link>该标签是一个vue-router中已经内置的组件, 它会被渲染成一个<a>标签.
   <router-view>该标签会根据当前的路径, 动态渲染出不同的组件
   在路由切换时, 切换的是<router-view>挂载的组件, 其他内容不会发生改变
4. 路由的默认路径
   默认进入网站就显示首页，让路径默认跳到首页，不让用户点击首页链接才能进入首页，再配置一个映射

routes: [
 {
  path: '',
  redirect: '/home' //页面重定向为Home
 }
]

5. 去掉#/

mode: 'history',   //与routes平级

6. router-link

①tag: tag可以指定<router-link>之后渲染成什么组件, 比如加上tag="button"之后会渲染成一个<button>元素, 而不是<a>

<router-link to="/home" tag="button">首页</router-link>

②replace: replace不会留下history记录, 所以指定replace的情况下, 后退键返回不能返回到上一个页面中

<router-link to="/home" tag="button" replace>首页</router-link>

③active-class: 当对应的路由匹配成功时, 会自动给当前元素设置一个router-link-active的class, 设置active-class可以修改默认的名称

<router-link to="/home" tag="button" replace active-class="active">首页</router-link>

④通过js修改活跃的class名字

linkActiveClass: 'active',   //router里的index.js中修改，与routes平级

7. 通过代码跳转路由
   所有的组件都有一个$router属性
   

8. 动态路由

routes: [
 {
  path: '/user/:userid', //拼接用户id
  component: User
 }
]

<!--App.vue-->
<router-link :to="'/user/'+userid">用户</router-link><!--属性动态绑定data数据前面要加v-bind:-->
<script>
export default {
 name: 'App',
 data(){
 return {
  userid: 'lisi'
  }
 }
}
</script>

<!--User.vue-->
<p>{{userid}}</p><!--获取userid-->
<script>
export default {
 name: "User",
 computed: {
 userid() {
   return this.$route.params.userid
  }
 }
}
</script>

路由懒加载

当打包构建应用时，js包会变的非常大，影响页面加载，用户的界面上还会出现短暂的空白。
路由懒加载的主要作用就说将路由对应的组件打包成一个个的js代码块，只有在这个路由被访问到的时候才加载对应的组件。
在ES6中, 我们可以有更加简单的写法来组织Vue异步组件和Webpack的代码分割

const Home = () => import('../components/Home.vue')

路由嵌套

两个步骤：
①创建对应的子组件，并且在路由映射中配置对应的子路由
②在组件内部使用<router-view></router-view>标签

//index.js
const HomeNews = () => import('../components/HoneNews')
const HomeMessage = () => import('../components/HomeMessage')
{
 path: '/home',
 component: Home,
 children: [
  {
   path: '',
   redirect: '/home/news' //默认
  },
  {
   path: 'news',
   component:HomeNews
  },
  {
   path: 'message',
   component:HomeMessage
  }
 ]
}

<!--Home.vue-->
<router-link to="/home/news">新闻</router-link>
<router-link to="/home/message">消息</router-link>
<router-view></router-view>

传递参数

params的类型:
 • 配置路由格式: /router/:id
 • 传递的方式: 在path后面跟上对应的值
 • 传递后形成的路径: /router/123, /router/abc
query的类型:
 • 配置路由格式: /router, 也就是普通配置
 • 传递的方式: 对象中使用query的key作为传递方式
 • 传递后形成的路径: /router?name=tu&old=18&height=160

<router-link :to="{path: '/Profile', query:{name:'tu',old: 18,height: 160}}">档案</router-link>
<p>{{$route.query.old}}</p>

$route和$router是有区别的
 • $router为VueRouter实例，想要导航到不同URL，则使用$router.push方法
 • $route为当前router跳转对象里面可以获取name、path、query、params等

导航守卫

什么是导航守卫?
 • vue-router提供的导航守卫主要用来监听监听路由的进入和离开的
 • vue-router提供了beforeEach和afterEach的钩子函数, 它们会在路由即将改变前和改变后触发
我们可以利用beforeEach来完成标题的修改
 • 首先, 我们可以在钩子当中定义一些标题, 可以利用meta来定义
 • 其次, 利用导航守卫,修改我们的标题.
导航钩子的三个参数解析:
 • to: 即将要进入的目标的路由对象
 • from: 当前导航即将要离开的路由对象
 • next: 调用该方法后, 才能进入下一个钩子

• vue-router有哪几种导航钩子（ 导航守卫 ）？
  作用：监听路由跳转的过程，跳转前进行判断拦截
  比如改变网页的标题，先在路由对象中的path里面添加meta（元数据）属性，里面写个title名称

{
	path: "/home",
	component: Home,
	meta: {
		title: '首页'
	}
}

第一种：全局导航钩子（前置）：
全局导航钩子主要有两种钩子：前置守卫、后置钩子。后置钩子的是afterEach，不需要调用next函数

//index.js添加
const router = new VueRouter({
	routers,
	mode: 'history'
})
router.beforeEach((to,from,next)=>{
    document.title=to.matched[0].meta.title
    next()//一定要用这个函数才能去到下一个路由，如果不用就拦截
})

第二种：路由独享钩子：只有进到路由里面才会回调

cont router = new VueRouter({
    routes: [
        {
            path: '/file',
            component: File,
            beforeEnter: (to, from ,next) => {
                // do someting ...
                next()
            }
        }
    ]
});

第三种：组件内的钩子

const Foo = {
  template: `...`,
  beforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
  },
  beforeRouteUpdate(to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave(to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }
}

keep-alive遇见vue-router

keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。
它们有两个非常重要的属性:
 • include - 字符串或正则表达，只有匹配的组件会被缓存
 • exclude - 字符串或正则表达式，任何匹配的组件都不会被缓存
router-view 也是一个组件，如果直接被包在 keep-alive 里面，所有路径匹配到的视图组件都会被缓存：

<keep-alive>
	<router-view>
		<!--所有路径匹配到的视图组件都会被缓存-->
	</router-view>
</keep-alive>

通过create声明周期函数来验证
总结：避免每次打开页面重新创建组件，提高性能