Vue-router 路由 (常见用法)

vue-router 的常见用法

一个完整的路由必须包含:路由链接和路由占位符、路由实例、路由规则链接的路由组件

1. 路由重定向

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

2. 嵌套路由

通过路由实现组件的嵌套展示，叫做嵌套路由。

2.1 声明子路由链接和子路由占位符

在 About.vue 组件中，声明 tab1 和 tab2 的子路由链接以及子路由占位符。示例代码如下：

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

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

3. 路由命名

• 为了更加方便的表示路由的路径，可以给路由规则起一个别名，即为“命名路由”。

//添加路由链接
//声明式导航
<router-link :to="{ name: 'user', params: { id: 123 }}">User</router-link>
//编程式导航
router.push({ name: 'user', params: { id: 123 }})

//定义路由规则
const router = new VueRouter({
    routes: [
        {
         path: '/user/:id',
         name: 'user',
         component: User
        }
    ]
})

4. 动态路由与路由匹配

• 一个完整的路由必须包含:路由链接和路由占位符、路由实例、路由规则链接的路由组件

4.1 动态路由的概念

动态路由指的是：把 Hash 地址中可变的部分定义为参数项，从而提高路由规则的复用性。

在 vue-router 中使用英文的冒号（:）来定义路由的参数项。示例代码如下：

4.2 $route.params 参数对象

在动态路由渲染出来的组件中，可以使用 this.$route.params 对象访问到动态匹配的参数值。

5. 路由传递参数和接收参数

<div id="app">
      <router-link to="/user/1">User1</router-link>
      <!-- 路由占位符 -->
      <router-view></router-view>
</div>
const User = {
         //组件的props属性接收参数
        props: ['id'],
         //props: ['uname', 'age'],
         //props: ['id', 'uname', 'age'],
        template: '<h1>User 组件 -- 用户id为: {{id}}</h1>'
}

// 创建路由实例对象
const router = new VueRouter({
    // 所有的路由规则
    routes: [
        { path: '/', redirect: '/user'},
         //props:true 开启传参
        { path: '/user/:id', component: User, props: true },
         //传对象类型props: { uname: 'lisi', age: 20 }
         //传函数类型props: route => ({ uname: 'zs', age: 20, id: route.params.id })
         //params传值
         { path: '/search', component: SearchUser,props: route => ({ query: route.query.q })}
         //query传值
    ]
})

6. 路由的懒加载

路由懒加载的应用场景:

• 首先, 我们知道路由中通常会定义很多不同的页面.

• 这个页面最后被打包在哪里呢? 一般情况下, 是放在一个js文件中.

• 但是, 页面这么多放在一个js文件中, 必然会造成这个页面非常的大

• 如果我们一次性从服务器请求下来这个页面, 可能需要花费一定的时间, 甚至用户的电脑上还出现了短暂空白的情况.

• 如何避免这种情况呢? 使用路由懒加载就可以了

路由懒加载的作用:

• p路由懒加载的主要作用就是将路由对应的组件打包成一个个的js代码块.
• 只有在这个路由被访问到的时候, 才加载对应的组件

6.1 路由懒加载的用法

在ES6中, 我们可以有更加简单的写法来组织Vue异步组件和Webpack的代码分割

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

例如：

// 配置路由相关的信息
import VueRouter from 'vue-router'
import Vue from 'vue'

// 原始路由加载
// import Home from '../components/Home'
// 路由懒加载(推荐)
const Home = () => imports('../components/Home')

// 1.通过Vue.use(插件), 安装插件
Vue.use(VueRouter)

const routes = [            // 在 routes 数组中,声明路由的匹配规则
  { 
    // path 表示要匹配的 hash 地址,component 表示要展示的路由组件  
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue')
  }
]

const router = new VueRouter({
  // 配置路由和组件之间的应用关系
  routes,
  mode: 'history',
  linkActiveClass: 'active'
})

// 3.将router对象传入到Vue实例
export default router

7. 导航守卫(钩子函数)

我们可以利用beforeEach来完成标题的修改

• 首先，我们可以在钩子当中定义一些标题，可以利用mate来定义

• 其次，利用导航守卫修改我们的标题

导航钩子的三个参数解析：

• to：即将要进入的目标的路由对象
• from：当前导航即要离开的路由对象
• next：调用该方法后，才能进入下一个钩子

全局守卫示例:

• 如果是后置钩子，也就是afterEach，不需要主动调用next(）函数。

7.1 next函数的三种调用方式

• 当前用户拥有后台主页的访问权限，直接放行： next()
• 当前用户没有后台主页的访问权限，强制其跳转到登录页面：next('/login')
• 当前用户没有后台主页的访问权限，不允许跳转到后台主页：next(false)