014.Vue-Router

Posted 2021-07-22 Ruovan

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了014.Vue-Router相关的知识，希望对你有一定的参考价值。

路由配置

01. 路由的基本使用

（1）路由定义

路由的定义：

// 第一步:引入必要的文件
import Vue from 'vue' // 加载全局组件时,都需要引入Vue
import VueRouter from 'vue-router' // 引入vue-router

import Home from '@/components/home' // 引入在路由中需要用到的组件
import About from '@/components/About'

// 第二步:加载Router
Vue.use(Router) // 加载全局组件Router

// 第三步:配置路由实例 routes
const routes = [
    {
        path: '/home',
        name: 'Home', // 给路由命名,设置的name要唯一!
        component: Home // 就是第一步import的组件
    },
    {
        path: '/about',
        name: 'About',
        component: About
    }
]

// 第四步:配置 Router
const router = new VueRouter({
    routes
})

// 第五步：导出路由文件
export default router

（2）组件配置

在vue组件内配置<router-link>和<router-view>
- router-link
  - 映射路由，就是创建a标签来定义路由导航的链接(用户通过点击实现跳转)
  - 通过to属性指定目标地址，默认渲染成带有正确链接的<a>标签
- router-view
  - 就是在标签内渲染你路由匹配到的视图组件
  - router-view支持嵌套router-view
  - 并且支持多个router-view分别渲染不同的component
```
<template>
	<div>
        <router-link to="/home"></router-link>
        <router-link to="/about"></router-link>
		
        <router-view>匹配到的路由将显示在这里，且这一对标签之间的内容不会显示在页面</router-view>
    </div>
</template>
```

（3）引入挂载

在main.js文件中引入挂载

//main.js文件中引入
import Vue from 'vue';
import VueRouter from 'vue-router';
import router from './router'

Vue.use(VueRouter); //挂载属性

new Vue({
    el: '#app',
    router, // 让vue知道我们的路由规则
    render: h => h(App),
})

02. `routes`配置项

（1）嵌套路由`children`

通过children属性来定义当前路由的嵌套路由

且，在其父级路由对应的组件中，还需要添加<router-view>，用于展示子路由

const routes = [
    {
        ...
        // 配置子路由
        children: [{
            // 这里的参数配置与之前的路由配置没有区别
            path: '/child',
            name: 'Child',
            // 还可以在子路由里嵌套子路由
            children:[
                {...},
                {...}
            ]
        }]
    },
]

（2）重定向`redirect`与别名`alias`

通过redirect属性来进行重定向路由

redirect可以是一个路径、一个命名路由、一个方法（动态返回）

重定向就是拦截路由path，然后替换url，并跳转到redirect指定的路径/路由

通过alias属性来配置路由的别名

配置别名后的路由相当于有了两条路径，访问任何一个路径，实际上指向同一个路由

const routes = [
    {
        // 当访问 [/home]时，会重定向到 [/another]
        path: '/home',
        redirect: '/another', 
    },
    {
        // 当访问 [/else] 时，实际上访问的是 [/about]，但地址栏 url 显示为 [/else]
        path: '/about',
        alias: '/else'
    }
]

（3）路由懒加载

通过Vue的异步组件和Webpack的代码分割功能，来实现路由组件的懒加载（按需加载）

使用懒加载对页面组件进行划分，在使用时才加载对应的组件，以减少首页的加载时间，优化用户体验

const Home = () => import('@/components/home')
const routes = [
    {
        path: '/home',
        name: 'Home',
        component: Home
    },
    {
        path: '/about',
        name: 'About',
        component: () => import('@/components/about')
    }
]

（官方）把组件按组分块：将路由下的所有组件都打包在同个异步块 (chunk) 中

Webpack 会将任何一个异步模块与相同的块名称组合到相同的异步块中

const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')

（4）路由元信息`meta`

定义路由时，每个路由都可以配置一个meta字段，可以在其中设置一些自定义信息，以供页面组件或者路由钩子函数使用

const routes = [
    {
        path: '/home',
        name: 'Home',
        meta: {
            title: 'Home Page'
        }
    },
    {
        path: '/about',
        name: 'About',
        meta: {
            title: 'About Page'
        }
    }
]

03. `new VueRouter`配置项

（1）`routes`

路由配置项

（2）`mode`

用于配置路由的模式，默认值为hash模式，可配置为history模式

区别（详细区别请看第一章）：

hash模式： localhost:8080/#/user/list

history模式： localhost:8080/user/list
```
const router = new VueRouter({
    // 路由模式：默认为hash，可配置为 history
    mode: 'history', 
    routes
})
```

（3）`base`

用于配置页面的基础路径，默认为/

配置基路径后，如base: ‘/app/’，表示当前页面的应用服务在/app/路径下

此时，那么访问 /app和访问 / 是一样的，因为所有请求都会自动在URL之后加上/app/
```
const router = new VueRouter({
    // 可以根据开发环境配置...
    base: process.env.NODE_ENV === "production" ? "/app/" : "/",
    routes
})
```

（4）`scrollBehavior`

用于控制，在页面跳转后页面的滚动行为

const router = new Router({
    routes,
    scrollBehavior (to, from, savedPostion) {
        // to:表示要前往的路由；from:表示从哪个路由来 —— 都是路由对象
        // savedPosition 在使用 浏览器的前进/后退按钮时才可用
        if (savedPostion) {
            return savedPostion // return 返回的是 期望滚动到的哪个位置
        }else if(to.hash) {
            return {selector: to.hash} // 如果存在hash,就滚动到hash所在位置
        } else {
            return { x: 0, y: 0 } // 回滚到顶部
        }
    }
})