Vue3开发教程（ 四、Vue-router基础篇）

 四、Vue-router基础篇

由于vue一般是单页面程序，但是实际上我们会有很多的页面试图。基于这个需求就需要一个路由通过某种路径来展示不同的视图。这一节我们来学习的Vue-route基础知识

1、安装vue-router

vscode终端中执行以下命令安装

 npm install vue-router@4

安装后我们在node_modules中可以看到vue-router

2、配置vue-router

创建router

在src下创建目录router，并在router下创建index.ts文件

  

index.ts文件内容

//导入vue-router
import { createRouter, createWebHashHistory } from "vue-router"

//创建路由表
const routes = []

//创建路由
const router = createRouter({
    history: createWebHashHistory(),
    routes
})

配置router

添加或修改main.js为以下内容

import { createApp } from 'vue'
import App from './App.vue'
//导入router
import router from './router'

//应用使用router
createApp(App).use(router).mount('#app')

//将router作为默认导出
export default router

3、编写第一个vue-router应用

创建视图文件

在src下创建views目录，并新建Home.vue和About.vue文件

Home.vue

<template>
  <div>Home</div>
</template>

 About.vue

<template>
  <div>About</div>
</template>

将试图配置到router中

修改src/rourer/index.ts中的路由表，分别将配置Home与About的路由path。

//创建路由表
const routes = [
    {path:'/home', component: () => import('../views/Home.vue')},
    {path:'/about', component: () => import('../views/About.vue')}
]

添加router-view与router-link

修App.vue template为如下内容

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="Hello Vue 3 + Vite" />
  <p>
    <!--使用 router-link 组件进行导航 -->
    <router-link to="/home">Home</router-link> |
    <router-link to="/about">About</router-link> 
  </p>
  <div>
    这是router-view
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
  </div>
</template>

运行并查看结果

点击Home会显示home视图，点击About则显示About视图。同时浏览器的地址也会改变为配置的path，说明我们的路由生效了。

提示：直接通过浏览器输入对应的路由也可以改变视图

 4、带参数的路由

vue中支持带有参数的路径。例如/user/1，如果想获取这个url中的1可以使用$route.params.id。

创建文件User.vue

User.vue 

<template>
    <div>User {{ $route.params.id }}</div>
</template>

/router/index.ts

//创建路由表
const routes = [
    {path:'/home', component: () => import('../views/Home.vue')},
    {path:'/about', component: () => import('../views/About.vue')},
    //动态路由url:/user/1 id为1
    {path:'/user/:id', component: () => import('../views/User.vue')}
]

App.vue

<p>
    <!--使用 router-link 组件进行导航 -->
    <router-link to="/home">Home</router-link> |
    <router-link to="/about">About</router-link>|
    <!--添加路由的参数--> 
    <router-link to="/user/1">User</router-link>
</p>

运行并查看结果

点击User可以看到下方router-view内容的变化，修改url为/user/3后内容也会变化。

 5、嵌套路由

嵌套路由顾名思义就是已经被路由的页面内部还有路由，下面我们就在User页面下做两个嵌套路由的页面Profile.vue，Posts.vue

创建Profile.vue，Posts.vue页面

 Profile.vue

<template>
  <div>user profile</div>
</template>

Posts.vue

<template>
  <div>user posts</div>
</template>

User.vue

<template>
  <div>User {{ $route.params.id }}</div>
  <div><router-view></router-view></div>
</template>

/router/index.ts

const routes = [
    { path: '/home', component: () => import('../views/Home.vue') },
    { path: '/about', component: () => import('../views/About.vue') },
    //动态路由url:/user/1 id为1
    {
        path: '/user/:id', component: () => import('../views/User.vue'),
        children: [
            {
                // 当 /user/:id/profile 匹配成功
                // UserProfile 将被渲染到 User 的 <router-view> 内部
                path: 'profile',
                component: () => import('../views/user/Profile.vue')
            },
            {
                // 当 /user/:id/posts 匹配成功
                // UserPosts 将被渲染到 User 的 <router-view> 内部
                path: 'posts',
                component: () => import('../views/user/Posts.vue')
            }
        ]
    }
]

运行并查看结果

可以看到输入/user/2/profile User页面显示user profile 输入/user/2/posts显示user posts，说明User页面内部的路由已经生效。

6.编程式导航

Vue可以使用内置对象$router来进行路由切换从而实现页面的变化。

下面我们修改Posts.vue、Profile.vue页面，通过$router实现两个页面的相互跳转。

Posts.vue

<script lang="ts">
export default {
  methods: {
    gotoProfile() {
      console.log("gotoProfile");
      //使用绝对路径返回到
      this.$router.push("/user/2/profile");
    }
  }
}
</script>
<template>
  <div>user posts</div>
  <button @click="gotoProfile()">goto Profile</button>
</template>

Profile.vue

<script lang="ts">
export default {
  methods: {
    gotoPosts() {
      console.log("gotoPosts");
      //使用相对路径返回
      //router.replace它的作用类似于 router.push，唯一不同的是，它在导航时不会向 history 添加新记录
      this.$router.replace("./posts");
    }
  }
}
</script>
<template>
  <div>user profile</div>
  <button @click="gotoPosts()">goto Posts</button>
</template>

运行并查看结果 

点击按钮我们可以看到Posts与Profile页面相互切换。

提示：router.replace它的作用类似于 router.push，唯一不同的是，它在导航时不会向 history 添加新记录。