好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

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

前言：

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

一、什么是 Vue Router ？

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

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

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

二、路由的使用

1、路由的安装

npm install vue-router@4

2、路由的模式

createWebHashHistory()：Hash模式 它在内部传递的实际URL之前使用了一个哈希字符 # ，如 https://ex am ple .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()创建路由，并暴露出去 在m ai n.js文件中初始化路由模块app.use(router) 

// router/index.js

import { createRouter, createWebHistory }  From  "vue-router";
import HomeView f rom  '@/views/HomeView.vue'

// 创建路由规则
let routes = [
    {
        path: '/', // URL 地址
        name: 'home',  // 名称
         component : HomeView  // 渲染该组件
    },
]

// 创建路由
const router = createRouter({
    // 使用 history 模式
    history: createWebHistory(),
    // 路由规则
    routes
})

// 将路由对象暴露出去
 export  default router
// main.js

import { 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>

三、路由的重定向和别名

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

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

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

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

四、嵌套路由

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

@H_ 126 _179@嵌套路由规则

在某一个路由规则中采用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>

五、声明式和编程式导航

声明式 编程式 描述
< router-link :to=[&helli p; ]>router.push(…)会向history栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，会回到之前的URL

1、声明式导航

很多时候，我们需要将给定匹配模式的路由映射到同一个组件，例如：想渲染不同博客的内容，其>实只是渲染到同一个组件上，只是博客的编号不同而已在Vue Router中，可以在路径中使用一个动态字段来实现，我们称之为[路径参数] ，语法如：path: ‘/url/:param’在展示的组件中访问路径参数
3.1. 在选项式 APIJS中采用this. r o u t e . p a r a m s 来访问，试图模板上采用 route.params来访问，试图模板上采用 route.params来访问，试图模板上采用route.params来访问
3.2. 在组合式 API 中，需要import { useRoute } from ‘vue-router’，JS和视图模板上通过useRoute().params来访问
3.3. 还可以通过在路由规则上添加 PR ops: true，将路由参数传递给组件的props中 


// 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.vue
<template>  
    <div class="school">
        我是 father 页面：
        <router-link to="/father/son">子页面</router-link>
        <hr>
		<!-- 该组件中自己的路由视图 -->
        <router-view />
    </div>
</template>


// son.vue 选项式
<script>
e xp ort 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 pro psd ata =  define Props({ 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(…)的语法
其的参数可以是一个字符串路径， 或者 一个描述地址的对象如果参数是描述地址的对象的话，其对象中path和params不能同时使用 

// 编程式导航
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-link :to=[…] replace>router.replace(…)它的作用类似于router.push(…)，唯一不同的是，它在导航时不会向history添加新记录，正如它的名字所暗示的那样，它取代了当前的条目

 提示：也可以直接在传递给router.push的routeLocation中增加一个属性replace: true 

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的简单示例   
                            


                        
总结

       
以上是  为你收集整理的 Vue3 中路由Vue Router 的使用实例详解 全部内容，希望文章能够帮你解决 Vue3 中路由Vue Router 的使用实例详解 所遇到的问题。

		
如果觉得  网站内容还不错，  推荐好友。


      
查看更多关于Vue3 中路由Vue Router 的使用实例详解的详细内容...

        

          
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did203986

        

      

        

           
         阅读：44次 
	

    


    

      
上一篇： 利用Vue-cli搭建Vue项目框架的教程详解 

      
 下一篇：在uni-app中使用vant组件的方法 

    

    
    

      
相关资讯