Vue3.0 路由 - 技术栈

简介

Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。功能包括：

嵌套路由映射
动态路由选择
模块化、基于组件的路由配置
路由参数、查询、通配符
展示由 Vue.js 的过渡系统提供的过渡效果
细致的导航控制
自动激活 CSS 类的链接
HTML5 history 模式或 hash 模式
可定制的滚动行为
URL 的正确编码

路由的基本使用

用 Vue + Vue Router 创建单页应用非常简单：通过 Vue.js，我们已经用组件组成了我们的应用。当加入 Vue Router 时，我们需要做的就是将我们的组件映射到路由上，让 Vue Router 知道在哪里渲染它们。

Unpkg.com 提供了基于 npm 的 CDN 链接。上述链接将始终指向 npm 上的最新版本。你也可以通过像 https://unpkg.com/[email protected]/dist/vue-router.global.js 这样的 URL 来使用特定的版本或 Tag。

安装 vue router

npm install vue-router@4

#或者

yarn add vue-router@4

使用

在项目中的src文件夹下面创建一个router的文件夹和一个views文件夹

在router文件夹下面创建一个index.js文件

在views文件夹下面创建一个Home.vue组件和一个List.vue组件

index.js文件内容：

javascript 复制代码

import { createRouter,createWebHashHistory } from "vue-router"; //导入vue-router路由模块,createWebHashHistor函数
import Home from "../views/Home.vue" //导入Home组件
import List from "../views/List.vue"

const routes = [
    {
        path: "/",  //路径:        
        //component: List  //path路径所对应的组件

        //表示如果路径是/ 那么就跳转到/list路径，而/list路径对应的是List组件，所以就显示出List组件的内容了
        //举列：当浏览器输入的是：http://localhost:5173/ 则会重定向跳转到 http://localhost:5173/#/list
        redirect:"/list" 

    },
    {
        path: "/home",  //路径
        component: Home //path路径所对应的组件：路径/ 和/home 都可以路由到Home组件

    },
    {
        path: "/list",  //路径
        component: List //path路径所对应的组件
    }
]

//创建路由对象
const router = createRouter({
    history: createWebHashHistory(),//按照hash路由模式来路由导航，这种模式的url地址会存在 /#/
    routes, //routes:routes的缩写

})

export default router //导出router路由对象//导出router路由对象


// createWebHashHistory() 是 Vue Router 提供的一种基于浏览器 URL 的 hash 路由模式，它将路由添加到 URL 中的 hash 中
// 例如：/#/home、/#/about。这种模式可以避免服务器配置的问题，而且支持所有浏览器。
// 但是，由于 URL 中添加了 hash，因此在搜索引擎的 SEO 优化中存在一些问题。

main.js文件内容

javascript 复制代码

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

//import router from "../src/router" //导入路由js          注意：如果仅仅是指定了一个文件夹router，程序会自动去router文件夹下寻找index.js，并导入
//import router from "../src/router/index" //导入路由js    注意：.js可以省略
import router from "../src/router/index.js" //导入路由js 
//import router from "../src/router/myindex.js" //导入路由js  注意：如果我们的路由文件不是index.js 那么我们就得指定具体的名称了

var app=createApp(App)

app.use(router) //注册路由组件

app.mount("#app")

App.vue组件

html 复制代码

<template>
  <div>
    {{ name }}
    <!-- <RouterView></RouterView> 是 Vue.js 框架中的一个组件，用于渲染与当前路由匹配的组件视图。当用户在应用中导航到不同的页面时，<RouterView> 组件会负责显示与当前路由对应的组件。 -->
    <!-- 举列：如果浏览器中输入：http://localhost:5173/#/list 这个路径对应的组件list就会插入到<RouterView></RouterView>中 -->
    <router-view></router-view> 
  </div>
</template>
<script setup>
import { ref, } from 'vue';

//导入模板即注册：注册的名字就是你导入用的名称Home
import Home from "./views/Home.vue" //导入Home组件:
import List from "./views/List.vue" //导入List组件:

const name = ref("李大锤");

</script>

Home.vue组件

html 复制代码

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

List.vue组件

html 复制代码

<template>
    <div>List</div>
</template>

路由别名的使用

在单页面应用中，网页具体路径显示是由vue-router配置中 path 决定的，path设置的是什么就显示什么，和name无关。

不同路由路径下页面渲染的内容，是根据component所对应的组件来进行渲染的，和name无关。

其实name就相当于给你的path取个别名，方便使用，路由并不是一定要设置name值。（如果不设置name，vue-router默认name值为 default）

index.js文件内容：

javascript 复制代码

import { createRouter,createWebHashHistory } from "vue-router"; //导入vue-router路由模块,createWebHashHistor函数
import Home from "../views/Home.vue" //导入Home组件
import List from "../views/List.vue"

const routes = [
    {
        path: "/",  //路径:        
        //component: Home  //path路径所对应的组件

        //表示如果路径是/ 那么就跳转到/list路径，而/list路径对应的是List组件，所以就显示出List组件的内容了
        //举列：当浏览器输入的是：http://localhost:5173/ 则会重定向跳转到 http://localhost:5173/#/list
        //redirect:"/list" 

        //redirect:"/list" 这种重定向是使用的路径方式来重定向的。我们也可以通过路由的name来重定向，如下：
        redirect:{
            name:"mylist" //重定向到路由名称为mylist的路由中，这样当浏览器输入的是：http://localhost:5173/ 则会重定向跳转到 http://localhost:5173/#/list
        }

    },
    {
        path: "/home",  //路径
        component: Home //path路径所对应的组件：路径/ 和/home 都可以路由到Home组件

    },
    {
        path: "/list",  //路径
        name:"mylist",  //路由名称，如果不指定name 默认的name为default
        component: List //path路径所对应的组件
    }
]

//创建路由对象
const router = createRouter({
    history: createWebHashHistory(),//按照hash路由模式来路由导航，这种模式的url地址会存在 /#/
    routes, //routes:routes的缩写

})

export default router //导出router路由对象//导出router路由对象