Vue 3教程 - 路由

安装及设置

安装依赖库：

bash

vue create vue-demo

选择Router后生成Vue项目
选择 history mode for router

Route的组成

每个route的组成包括：

• path: 对应的路径
• name: 路径名称
• component：对应组件

定义router

在文件router/index.js中：

JavaScript

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

注册router

在main.js中，需要指定使用上面定义的router：

JavaScript

import { createApp } from 'vue;
import App from './App.vue';
import router from './router';

createApp(App).use(router).mount('#app');

在view中使用路由

由于Vue需要捕获链接单击，因此，这里需要使用router-link。相反的，如果使用普通的HTML a标签，Vue就无法截获这个单击，而是会重新向服务器发送一个请求。

markup

<div id="nav">
  <router-link to="/">Home</router-link>
  <router-link to="/about">About</router-link>
</div>
<router-view />

上面router-view的作用就是根据当前路由，在这个标记对应的位置加载对应的组件。

在使用router-link时，还能自定义对应的链接样式：

css

#nav a {
  font-weight: bold;
  color: #3c4de5;
  text-decoration: none;
  padding: 10px;
  border-radius: 3px;
}
#nav a.router-link-exact-active {
  color: white;
  background: grey;
}

需要注意的是，在使用router-link时，可以使用更加灵活的方式：

markup

<router-link :to="{name: 'About'}">About</router-link>

这样，当以后route发生变化的时候，只需要更改router/index.js一个地方(Single source of truth)，而不是需要找到所有链接到About的地方做出更改。

子路由

如果要添加一个子路径，比如：/student/123，需要：

router/index.js

JavaScript

const routes = [
  {
    path: '/students',
    name: 'Students',
    component: Students
  },
  {
    path: '/students/:id',
    name: 'StudentDetails'
  }
]

### view

添加文件：views/students/Details.vue:

``` html
<template>
  <h1>Student details</h1>
  <p>Student id: {{ id }}</p>
</template>

<script>
export default {
  data() {
    return {
      id: this.$route.params.id
    }
  }
}
</script>

在Students中，

markup

<router-link :to="{ name: 'StudentDetails', params: { id: student.id }}">
  <h3>{{ student.name }}</h3>
</router-link>  

另外一种接收参数的方式

同时，也可以在Details中声明要接收的属性，这样就不需要在data中声明id了：

markup

export default {
  props: ['id'],
}

但需要在router/index.js中声明：

JavaScript

{
  path: '/students/:id',
  name: 'StudentDetails',
  component: StudentDetails,
  props: true
}

重定向

JavaScript

{
  path: '/all-students',
  redirect: '/students'
}

404

JavaScript

{
  path: '/:catchAll(.*)',
  name: 'NotFound',
  component: NotFound
}

编程控制路由

可以使用内置对象$router的对应方法来进行控制：

JavaScript

this.$router.go(-1);
this.$router.push({ name: 'Home' });

懒加载