基本使用

官方文档:vue-router

安装

npm i vue-router,默认安装的是最新版本(只支持Vue3,Vue2需要指定版本vue-router@3

使用步骤

  1. 创建路由器
  2. 注册路由
  3. 使用路由
  4. 编写路由组件

注意:

  1. 不断切换路由时,路由组件在重复地销毁和挂载,即重复地经过完整的生命周期
  2. vue-router 插件会向 vm 和 vc 身上添加 $route(当前路由) 和 $router(全局路由器) 两个属性

创建路由器

在src目录下新建router/index.js

使用new VueRouter()的方式来创建路由器实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import VueRouter from 'vue-router'
import Vue from 'vue'
import routes from './routes'

Vue.use(VueRouter); // 使用插件


const router = new VueRouter({
// 配置
routes, // 路由配置规则
mode: "history"
})

export default router;

路由规则可以将其提取到当前文件夹的一个文件routes.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
import Home from '@/views/Home'
import About from '@/views/About'
import Blog from '@/views/Blog'
import Project from '@/views/Project'
import Message from '@/views/Message'

// 如果有子路由的话,在每个对象中新增 children[] 属性即可,其中数字每一项也都是路由对象
export default [{
name: "Home",
path: '/',
component: Home,
}, {
name: "About",
path: '/about',
component: About,
}, {
name: "Blog",
path: '/blog',
component: Blog,
}, {
name: "Project",
path: '/project',
component: Project,
}, {
name: "Message",
path: '/message',
component: Message,
}, ]

注册路由

在实例化Vue对象的时候将创建好的路由器实例当作配置信息

1
2
3
4
5
6
7
8
9
import Vue from 'vue'
import App from './App.vue'
import router from './router'


new Vue({
router,
render: h => h(App),
}).$mount('#app')

使用路由

vue-router提供了特殊的标签来使用路由

<router-link> 会自动读取当前的路由模式(hash/history/abstract),并将其自动解析成<a>标签

<router-view> 将指定路由页面显示,如果在<router-view>里面还会使用到<router-view>,那里面的路由信息应该是外面的子路由

编写路由组件

一般将路由组件放到src/views中,声明某个路由地址对应某个页面

路由模式

路由模式决定了:

  1. 路由从哪里获取访问路径
  2. 路由如何改变访问路径

vue-router提供了三种路由模式:

  1. hash:默认值。路由从浏览器地址栏中的 hash 部分获取路径,改变路径也是改变的 hash 部分。该模式兼容性最好。

    1
    2
    http://localhost:8081/#/blog  -->  /blog
    http://localhost:8081/about#/blog --> /blog
  2. history:路由从浏览器地址栏的location.pathname中获取路径,改变路径使用的 H5 的history api。该模式可以让地址栏最友好,但是需要浏览器支持history api

    1
    2
    3
    http://localhost:8081/#/blog  -->  /
    http://localhost:8081/about#/blog --> /about
    http://localhost:8081/blog --> /blog
  3. abstract:路由从内存中获取路径,改变路径也只是改动内存中的值。这种模式通常应用到非浏览器环境中。

    1
    2
    3
    内存: /			-->   /
    内存: /about --> /about
    内存: /blog --> /blog

无刷新跳转

在点击链接后页面刷新会做下面几件事情

  1. 请求index.html
  2. 请求各种 *.js
  3. 请求各种 *.css
  4. 执行 js
  5. 创建vue应用
  6. 渲染全部组件树
  7. 挂载到指定的div中

但如果不刷新进行跳转:

  1. 执行一段js代码:切换某个区域的组件

普通点击跳转实现的是:location.href='/'

无刷新跳转实现的是:history.pushState(null, null, '/')

将原本的a标签改写

1
2
3
<a href="https://www.baidu.com"></a>

<router-link to="https://www.baidu.com"></router-link>

路径匹配样式

默认情况下,vue-router会用 当前路径 匹配 导航路径

  • 如果当前路径是以导航路径开头,则算作匹配,会为导航的 a 元素添加类名router-link-active
  • 如果当前路径完全等于导航路径,则算作精确匹配,会为导航的 a 元素添加类名router-link-exact-active

可以为组件RouterLink添加 bool 属性exact,将匹配规则改为:必须要精确匹配才能添加匹配类名router-link-active

另外,可以通过active-class属性更改匹配的类名,通过exact-active-class更改精确匹配的类名

命名路由

使用命名路由可以解除系统与路径之间的耦合

1
2
3
4
5
6
7
8
9
10
// 路由配置
const router = new VueRouter({
routes: [
// 路由规则
// 当匹配到路径 /foo 时,渲染 Foo 组件
{ name: 'foo', path: '/foo', component: Foo },
// 当匹配到路径 /bar 时,渲染 Bar 组件
{ name: 'bar', path: '/bar', component: Bar },
],
});
1
2
<!-- 向to属性传递路由信息对象 RouterLink会根据你传递的信息以及路由配置生成对应的路径 -->
<RouterLink :to="{ name:'foo' }">go to foo</RouterLink>