Vue3 中路由Vue Router 的使用实例详解

目录

• 前言：
• 一、什么是 Vue Router ？
• 二、路由的使用
• 1、路由的安装
• 2、路由的模式
• 3、创建路由模块
• 4、声明路由链接和占位符
• 三、路由的重定向和别名
• 四、嵌套路由
• 五、声明式和编程式导航
• 1、声明式导航
• 2、编程式导航
• 3、替换当前位置
• 4、路由历史
• 总结：

在编写vue里的SPA（Single Page Application单页面应用）时，我们始终绕不开路由的使用，vue-router4.0版里有一些重要更新，在这里分享给大家。

一、什么是 Vue Router ？

vue-router是vue.js官方给出的路由解决方案，能够轻松的管理SPA项目中组件的切换

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

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

二、路由的使用

1、路由的安装

npm install vue-router@4

2、路由的模式

• createWebHashHistory()：Hash模式
• 它在内部传递的实际URL之前使用了一个哈希字符#，如 https://example.COM/#/user/id
• 由于这部分 URL 从未被发送到服务器，所以它不需要在服务器层面上进行任何特殊处理
• createWebHistory()：history模式，推荐使用
• 当使用这种历史模式时，URL会看起来很“正常”，如 https://example.com/user/id
• 由于我们的应用是一个单页的客户端应用，如果没有适当的服务器配置，用户在浏览器中直接访问https://example.com/user/id，就会得到一个404错误；要解决这个问题，你需要做的就是在你的服务器上添加一个简单的回退路由，如果URL不匹配任何静态资源，它应提供与你的应用程序中的index.html相同的页面

3、创建路由模块

• 在项目中的src文件夹中创建一个router文件夹，在其中创建index.js模块
• 采用createRouter()创建路由，并暴露出去
• 在main.js文件中初始化路由模块app.use(router)

// router/index.jsimport {
 createRouter, createWebHistory }
     From "vue-router";
import HomeView from '@/views/HomeView.vue'// 创建路由规则let routes = [    {
        path: '/', // URL 地址        name: 'home',  // 名称        component: HomeView  // 渲染该组件    }
,]// 创建路由const router = createRouter({
    // 使用 history 模式    history: createWebHistory(),    // 路由规则    routes}
)// 将路由对象暴露出去export default router// main.jsimport {
 createApp }
     from 'vue'import App from './App.vue'import router from './router'  // 引入路由模块let app = createApp(App)app.use(router) // 初始化路由插件app.mount('#app')

4、声明路由链接和占位符

• router-link> ：路由链接，to属性则为点击此元素，需要切换的路由地址
• router-view> ：路由占位符，路由切换的视图展示的位置

template>
    	!--   路由链接，点击是路由地址会切换到属性 to 的地方   -->
        router-link to="/">
    首页/router-link>
        |    router-link to="/blog">
    博客/router-link>
        hr>
    	!--   路由试图，路由切换组件的地方   -->
        router-view/>
    /template>
    

三、路由的重定向和别名

在路由规则中，可采用redirect来重定向另一个地址

// 路径写法const routes = [{
 path: '/home', redirect: '/' }
]// 命名写法const routes = [{
 path: '/home', redirect: {
 name: 'home' }
 }
    ]]

别名表示访问url时自由命名，不受约束，router会自动进行别名匹配，就像我们设置/的别名为/home，相当于访问 /

// alias是别名的keyconst routes = [{
 path: '/', component: HomeView, alias: '/home' }
    ]

四、嵌套路由

如果在路由视图中展示的组件中包含自己的路由占位符，则此处会用到嵌套路由
如图所示：点击关于链接，则会显示About组件，在其组件中又包含了路由链接和路由占位符

嵌套路由规则

• 在某一个路由规则中采用children来声明嵌套路由的规则
• 嵌套路由规则中的path不能以/开头，访问需使用/father/son的形式

// router/index.js{
        path: '/father',    name: 'father',    component:  () =>
 import('@/views/father.vue'),    // 嵌套路由    children: [        {
                path: 'son', // path 前面不要加 /            name: 'son',            component: () =>
 import('@/views/son.vue')        }
,    ]}
    // father.vue 页面template>
          div class="school">
            我是 father 页面：        router-link to="/father/son">
    子页面/router-link>
            hr>
    		!-- 该组件中自己的路由视图 -->
            router-view />
        /div>
    /template>
    

五、声明式和编程式导航

1、声明式导航

// router/index.js{
        path: '/father',    name: 'father',    component:  () =>
 import('@/views/father.vue'),    // 嵌套路由    children: [        {
                path: 'son/:id', // path 前面不要加 / （路径传参）            name: 'son',            component: () =>
 import('@/views/son.vue'),            props: true  // 将路径参数传递到展示组件的 props 中        }
,    ]}
    // father.vuetemplate>
          div class="school">
            我是 father 页面：        router-link to="/father/son">
    子页面/router-link>
            hr>
    		!-- 该组件中自己的路由视图 -->
            router-view />
        /div>
    /template>
    // son.vue 选项式script>
export default {
    // 通过 props 来接收路径参数    props: {
 id: String }
,    methods: {
        showRouteParams() {
            // 通过 `this.$route.params` 获取路径参数            console.LOG(this.$route.params)          	// 取出指定的路径参数            console.log(this.$route.params.id)            // 输出 props 中得到的路径参数            console.log("输出 props 中得到的路径参数：" + this.id)        }
    }
}
    /script>
    template>
        div class="math">
            我是 BlogContent 页面        ul>
                li>
通过 `this.$route.params` 获取路径参数 -- {
{
 $route.params }
}
    /li>
                li>
取出指定的路径参数 -- {
{
 $route.params.id }
}
    /li>
                li>
输出 props 中得到的路径参数 id -- {
{
 id }
}
    /li>
            /ul>
            button @click="showRouteParams">
    在 JS 中访问路径参数/button>
        /div>
    /template>
    // son.vue 组合式script SETUP>
import {
 useRoute }
 from 'vue-router'// 通过 props 来接收路径参数let propsdata = defineProps({
 id: String }
)// 获取路由跳转对象let route = useRoute()function showRouteParams() {
    console.log(route.params) // 通过 `route` 获取路径参数    console.log(route.params.id) // 取出指定的路径参数    console.log("输出 props 中得到的路径参数：" + propsData.id)}
    /script>
    template>
        div class="math">
            我是 BlogContent 页面        ul>
                li>
通过 `route` 获取路径参数 -- {
{
 route.params }
}
    /li>
                li>
取出指定的路径参数：{
{
 route.params.id }
}
    /li>
                li>
输出 props 中得到的路径参数 id -- {
{
 id }
}
    /li>
            /ul>
            button @click="showRouteParams">
    在 JS 中访问路径参数/button>
        /div>
    /template>
    

2、编程式导航

编程式的router.push(…)的语法

// 编程式导航const username = 'eduardo'// 我们可以手动建立 url，但我们必须自己处理编码router.push(`/user/${
username}
    `) // ->
 /user/eduardo// 同样router.push({
 path: `/user/${
username}
` }
    ) // ->
 /user/eduardo// 如果可能的话，使用 `name` 和 `params` 从自动 URL 编码中获益（params名必须和 router规则中的名一致）router.push({
 name: 'user', params: {
 username }
 }
    ) // ->
 /user/eduardo// `params` 不能与 `path` 一起使用router.push({
 path: '/user', params: {
 username }
 }
    ) // ->
     /user

3、替换当前位置

router.push({
 path: '/home', replace: true }
)// 相当于router.replace({
 path: '/home' }
    )

4、路由历史

router.go(n) 该方法采用一个整数作为参数，表示在历史堆栈中前进或后退多少步，类似于 window.history.go(n)

// 向前移动一条记录，与 router.forward() 相同router.go(1)// 返回一条记录，与 router.back() 相同router.go(-1)// 前进 3 条记录router.go(3)// 如果没有那么多记录，静默失败router.go(-100)router.go(100)

总结：

到此这篇关于Vue3 中路由Vue Router 的使用的文章就介绍到这了,更多相关Vue3 路由Vue Router使用内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

• vue3路由新玩法useRoute和useRouter详解
• 关于Vue3路由push跳转问题(解决Vue2this.$router.push失效）
• vue3使用vue-router及路由权限拦截方式
• vue3中router路由以及vuex的store使用解析
• Vue3使用路由VueRouter4的简单示例

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！