Vue Router 路由的安装和使用

路由（Router）的安装

在项目的根目录中输入下面的命令安装Router路由，会让我们选择模式，我们输入n选择哈希模式即可。

vue add router

在项目中生成router和views文件夹时代表安装成功，router文件夹下的index.js是用于配置路由，views文件夹上存放的是页面组件。

配置路由

在vue创建的默认项目中，已经为我们配置了默认的home和about组件，我们新建一个组件Index.vue来进行配置。

<template>
    <div>
        <h1>this is my create pages</h1>
    </div>
</template>

我们在routes中配置index.vue的组件

const routes = [{
        path: '/',
        name: 'Home',
        component: Home
    },
    {
        path: '/about',
        name: 'About',
        component: () => import ('../views/About.vue')
    },
    {
        path: '/index',
        name: 'index',
        component: () => import ('../views/Index.vue')
    }
]

使用 () => import('xxx.vue') 路由懒加载可以更加高效。

引用组件

在我们的App.vue主页面中，我们通过<router-link></router-link>标签来进行引用组件

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> | 
      <router-link tag="span" to="/index">Index</router-link>
    </div>
    <router-view/>
  </div>
</template>

我们可以使用tag属性渲染成指定的标签，to 控制的是跳转的组件，我们还可以使用name和path来绑定，值为./router/index.js中路由配置的name和path参数。

<router-link :to="{name: 'About'}">About</router-link>
<router-link :to="{path: '/index'}">Index</router-link>

动态路由

动态路由就是可以变化的参数，比如下面的id，并且这个页面的跳转需要用name来跳转，因为path是动态的。

<router-link :to="{name: 'about',params:{id:1}}">About</router-link>

{
    path: '/about/:id',
    name: 'about',
    component: () => import ('../views/About.vue')
}

  mounted(){
    console.log(this.$route.params.id);
  }

在实例被挂载后调用后可以获取路由传递过来的值。

历史模式

我们在点击组件的时候我们发现地址栏的地址存在符号 #，如果不想要这个符号，我们可以将路由配置为历史模式。

const router = new VueRouter({
    mode: "history", // 配置为历史模式
    routes
})

完全匹配

在路由中，当我们的地址与组件完全匹配的时候会添加一个class属性router-link-exact-active，我们可以给这个class属性添加一些样式。

.router-link-exact-active {
  color: #42b983;
}

包含匹配

在路由中，地址包含了当前组件的地址是，会添加一个class属性router-link-active，同样也可以添加一些样式。

.router-link-active {
  color: #42b983;
}

router-link-exact-active 和 router-link-active 的属性名可能会太过于长，我们可以重新配置下名字

const router = new VueRouter({
    mode: "history", // 设置为历史模式
    linkExactActiveClass: "active-exact", //配置完全匹配的class名字
    linkActiveClass: "active", //配置包含匹配的class名字
    routes
})

配置完成后我们就可以使用active-exact和active来代替他们使用。

重定向

当进入指定路由后跳转到指定路由界面。

const routes = [{
        path: '/',
        redirect: './Home',
    }, {
        path: '/Home',
        name: 'Home',
        component: Home
    }
]

导航守卫（钩子函数）

全局守卫

beforeEach

当导航触发时调用。

router.beforeEach( (to,from,next) => {
	// ...body
} )

beforeResolve

在所有的组件内守卫解析后执行。

router.beforeResolve( (to,from,next) => {
	// ...body
} )

afterEach

在beforeResolve之后调用，次钩子函数没有next。

router.afterEach( (to,from) => {
	// ...body
} )

路由独享守卫

beforeEnter

在路由组件创建后触发。

routes : [
  {
    path: '/home',   //跳转的路径
    name: 'home',   //组件的名称
    component: Home,   //加载的组件
    beforeEnter (to,from,next){   //路由独享守卫
      // ...body
    }
  }
]

组件守卫

beforeRouteEnter

解析时调用，此时组件还没有被创建，所以不能使用this。

export default{
	beforeRouteEnter(to,from,next){
		// ...body
	}
}

beforeRouteUpdate

组件是不会重新加载，路由改变的时候，组件被重新渲染。

export default{
	beforeRouteUpdate(to,from,next){
		// ...body
	}
}

beforeRouteLeave

离开对应路由时触发，通常用于用户未保存后突然离开，可以通过next(false)来取消。

export default{
	beforeRouteLeave(to,from,next){
		// ...body
	}
}

• to ：即将要进入的目标路由对象
• from ：当前导航正要离开的路由
• next : 管道，一定要调用此方法来resolve这个钩子
  • next() 继续下面的钩子函数
  • next(false) 取消当前的导航
  • next("/") 或者 next({ path : “/” }) 跳转到一个不同的地址

导航守卫解析流程