基本使用

官方文档：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
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
29
30
31
32
33
34
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
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>