Vue Router基础

安装与配置

安装 vue-router：

npm install vue-router@3.5.2 -S

创建路由模块，在 src 源代码目录下，新建 router/index.js 路由模块，初始化代码：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/component/Home.vue'
import About from '@/component/About.vue'
import Movie from '@/component/Movie.vue'

// 把 VueRouter 安装为 Vue 的插件
Vue.use(VueRouter)

// 路由匹配规则
const routes = [
  { path: '/home', component: 'Home' },
  { path: '/about', component: 'About' },
  { path: '/movie', component: 'Movie' },
]

// 创建路由实例对象
const router = new VueRouter({
  routes,
})

export default router

在 main.js 文件中导入并挂载路由模块：

import Vue from 'vue'
import App from './App.vue'
import router from './router/index.js'

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

在组件中声明路由链接和占位符：

<template>
  <div class="app-container">
    <!-- 路由链接 -->
    <router-link to="/home">首页</router-link>
    <router-link to="/about">关于</router-link>
    <router-link to="/movie">电影</router-link>

    <!-- 路由出口 -->
    <router-view></router-view>
  </div>
</template>

注意事项

• 组件分为路由组件和一般组件，前者放在 pages(或views) 文件夹，后者放在 components 文件夹
• 通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载
• 每个组件都有自己的$route属性，里面存储着自己的路由信息
• 整个应用只有一个路由器对象$router，可以通过组件的$router属性获取到
• <router-link> 的 replace 属性: 控制路由跳转时操作浏览器历史记录的模式

嵌套路由

About 组件中声明子路由链接和子路由占位符：

<template>
  <div class="about-container">
    <router-link to="/about/tab1">tab1</router-link>
    <router-link to="/about/tab2">tab2</router-link>

    <router-view></router-view>
  </div>
</template>

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

import Tab1 from '../views/Tab1'
import Tab2 from '../views/Tab2'

const routes = [
  {
    path: '/about',
    component: 'About',
    children: [
      // 注意不要写成 /tab1
      { path: 'tab1', component: Tab1 },
      { path: 'tab2', component: Tab2 },
    ],
  },
]

注意:

• 子路由前面不能加/
• 跳转（要写完整路径）：<router-link to="/home/news">News</router-link>

路由元信息meta

在 meta 中可以为路由添加自定义信息：

const routes = [
  {
    name: 'about',
    path: '/about',
    component: About,
    meta: { title: 'hello', isAuth: true },
  },
]

路由高亮

被激活的路由链接，默认会添加 router-link-active 的类名。可据此为激活的路由链接设置高亮的样式：

.router-link-active {
  color: white;
  background-color: pink;
}

定义路由模块时可以自定义路由链接被激活时添加的类名：

const router = new VueRouter({
  // 默认的 router-link-active 会被覆盖
  linkActiveClass: 'active-hello',
  routes,
})

声明路由链接时也可用 active-class 属性自定义激活类名：

<!-- router-link-active 会被覆盖为 active -->
<router-link active-class="active" to="/about">About</router-link>

路由重定向

const routes = [
  // 访问 / 跳转到 /home
  { path: '/', redirect: '/home' },
  { path: '/home', component: 'Home' },
  { path: '/about', component: 'About' },
  { path: '/movie', component: 'Movie' },
]

const router = new VueRouter({
  routes,
})

export default router

路由跳转的replace方法

作用: 控制路由跳转时操作浏览器历史记录的模式

浏览器的历史记录有两种写入方式

• push: 是追加历史记录，
• replace: 是替换当前记录。

路由跳转时候默认为push方式

开启replace模式：

<router-link replace ...>News</router-link>

• 代码示例

<template>
    <div>
        <h2>Home组件内容</h2>
		<div>
			<ul class="nav nav-tabs">
				<li>
					<router-link replace class="list-group-item" active-class="active" to="/home/news">News</router-link>
				</li>
				<li>
					<router-link replace class="list-group-item" active-class="active" to="/home/message">Message</router-link>
				</li>
			</ul>
			<router-view></router-view>
		</div>
    </div>
</template>

<script>
    export default {
        name:'Home'
    }
</script>