vue2.0路由

5.1 路由的概念

1、路由概念：路由就是对应关系

2、SPA与前端路由

（1）SPA指的是一个web网站只有唯一的一个页面，所有的组件的展示与切换都在这唯一的一个页面内完成。此时，不同的组件之间的切换需要通过前端路由来实现

（2）前端路由：Hash地址与组件之间的对应关系（Hash地址就是锚链接#后面的部分，包含#）

5.2 vue-router的基本使用

1、地址：Vue Router

2、安装和配置

（1）安装vue-router包：npm install vue-router@3.5.2 -S

（2）创建路由模块

在src源代码目录下，新建router/index.js路由模块，初始化代码如下：（在vue装插件用Vue.use()）

//导入Vue和VueRouter的包
import Vue from 'vue'
import VueRouter from 'vue-router'
​
//调用Vue.use()函数，把VueRouter安装为Vue的插件
Vue.use(VueRouter)
​
//创建路由的实例对象
const router = new VueRouter()
​
//向外共享路由的实例对象
export default router

（3）导入并挂载路由模块

• 在main.js中导入并挂载路由模块

• 如果命名不是router，而是routerObj，则挂载是：router:routerObj

• 如果命名是router，则挂载可以简写为router

• 在进行模块化导入时，如果只给文件名，则默认导入其下的index.js文件

import router  from '@/router/index.js'
​
//在new Vue中进行挂载
new Vue({
  render: h => h(App),
  router
}).$mount('#app')

（4）声明路由链接和占位符

• 只要在项目中安装和配置了vue-router，就可以使用router-view这个组件

• router-view的作用是占位符

<!-- 这是在根组件中的 -->
<router-view></router-view>

//这是在index.js文件的
​
//创建路由的实例对象
const router = new VueRouter({
  //routes是一个数组，为了定义hash地址与组件之间的对应关系
  routes:[
      //组件要在文件中事先导入
      {path:'路径（不加#）',component:要展示的组件}
  ]
})

3、使用router-link替代a链接

路径前不加#

<router-link to="/home"></router-link>

4、redirect重定向

路由重定向：用户在访问地址A的时候，强制用户跳转到地址C，从而展示特定的组件页面，通过路由规则的redirect属性，指定一个新的路由地址，可以很方便的设置路由的重定向

const router = new VueRouter({
  routes:[
    {path: '/',redirect: '/home'},
    {path: '/home',component: Home}
  ]
})
​

5.3 vue-router的常见用法

1、嵌套路由

（1）概念：通过路由实现组件的嵌套显示

（2）路由规则

• 通过children属性声明子路由规则

• 子路由规则不加/

• 在src/router/index.js路由模块中，导入需要的组件，并使用children属性声明自路由规则

import Tab1 from '@/components/tabs/Tab1.vue'
import Tab2 from '@/components/tabs/Tab2.vue'
​
const router = new VueRouter({
  routes:[
    {
      path: '/about',
      component: About,
      children:[
        {path: 'tab1',component: Tab1},
        {path: 'tab2',component: Tab2}
      ]
    }
  ]
})

（3）重定向redirect

const router = new VueRouter({
  routes:[
    {
      path: '/about',
      component: About,
      redirect: '/about/tab1',
      children:[
        {path: 'tab1',component: Tab1},
        {path: 'tab2',component: Tab2}
      ]
    }
  ]
})

（4）默认子路由

如果children数组中，某个路由规则的path值为空字符串，则这条路由规则叫做默认子路由

2、动态路由

（1）概念：把Hash地址中可变的部分定义为参数项，提高路由规则的复用性，在vue-router中使用冒号（:）来定义路由的参数项

{path: '/movie/:id',component: Movie}

（2）在组建中要想使用id（这个名字是随便取的），需要通过$route.params.id获取，以下两种方法均可

<h3>Movie页面 ---{{ this.$route.params.id }}</h3>
<h3>Movie页面 ---{{ $route.params.id }}</h3>

（3）为路由规则开启props传参

在子组件中加入props:[]

<script>
export default {
  name: 'Movie',
  props:['id']
}
</script>

在index.js中加一个props:true

{path: '/movie/:id',component: Movie,props:true}

（4）query和fullPath

• 在hash地址中，/后面的参数项叫做“路径参数”

• 在路由“参数对象”中，需要使用this.$route.params来访问路径参数

• 在hash地址中，?后面的参数项叫做“查询参数”

• 在路由“参数对象”中，需要使用this.$route.query来访问查询参数

• 在this.$route中，path只是路径部分，fullPath是完整的地址

• this.$route是路由的“参数对象”

• this.$router是路由的“导航对象”

3、导航

（1）声明式导航和编程式导航

声明式导航：在浏览器中，点击链接实现导航的方式，叫做声明式导航

编程式导航：在浏览器中，调用API方法实现导航的方式，叫做编程式导航

vue-router提供了导航API：

• this.$router.push('hash地址')：跳转到指定hash地址，并增加一条历史记录

• this.$router.replace('hash地址')：跳转到指定hash地址，并替换掉当前的历史记录

• this.$router.go(数值n)：可以在浏览历史中前进和后退，数值为1是前进一位，-1是后退一位，若后退的层数超过上限则原地不动

• this.$router.back()：在历史记录中，后退到上一个界面

• this.$router.forward()：在历史记录中，前进到下一个界面

（2）导航守卫：可以控制路由的访问权限

（2.1）全局前置守卫

每次发生路由的导航跳转时，都会触发全局前置守卫，因此，在全局前置守卫中，程序员可以对每个路由进行访问权限的控制

• to：将要访问的路由信息对象

• from：将要离开的路由信息对象

• next：一个函数，调用next()表示放行，允许这次路由导航

//创建路由的实例对象
const router = new VueRouter({ ... })
​
//调用路由实例对象的beforeEach方法，即可声明全局前置守卫
//每次发生路由导航跳转的时候，都会自动触发function这个回调函数
router.beforeEach((to,from,next) => {
    next()
})

（2.2）next函数的三种调用方式

• 当前用户拥有后台主页的访问权限，直接放行：next()

• 当前用户没有后台主页的访问权限，强制其跳转到登录界面：next('/login')

• 当前用户没有后台主页的访问权限，不允许跳转到后台主页：next(false)

（2.3）控制访问权限

router.beforeEach((to,from,next) => {
  if(to.path === '/main'){
    const token = localStorage.getItem('token')
    if(token){
      //访问的是后台主页，有token的值
      next()
    }else{
      //访问的是后台主页，没有token的值
      next('/login')
    }
  }else{
    //访问的不是后台主页，直接放行
    next()
  }
})