（四）vue路由简单梳理

最新推荐文章于 2024-11-20 00:16:50 发布

原创最新推荐文章于 2024-11-20 00:16:50 发布 · 159 阅读

0 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍Vue-Router的基本使用，包括路由匹配、路由组件定义、路由规则配置及动态路由匹配等核心概念。同时，探讨了路由重定向和嵌套路由的实现方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

路由是什么

URL 和资源直接的对应关系，就是路由。
Vue-Router水很深，先简述一下基本使用，官网参见https://router.vuejs.org/zh/

如何实现路由匹配

A.导入js文件

B.添加路由链接
router-link 类似一个插槽，通过 to 属性指定目标地址，默认渲染成带有正确链接的 <a> 标签

<route-link to='home'>首页</route-link>

<router-link :to="{ path: 'home' }">Home</router-link>

C.添加路由占位符(最后路由展示的组件就会在占位符的位置显示)

<route-view></route-view>

D.定义路由组件

const Home = {
template :`
<h1>欢迎来到首页</h1>
`
}

E.配置路由规则并创建路由实例

var myRouter = new VueRouter({
routes:[
{path:"/home",component:Home},
]
})

F.将路由挂载到Vue实例中

new Vue({
el:"#app",
//通过router属性挂载路由对象
router:myRouter
})

路由重定向

{ path:"/",redirect:"/user"},

嵌套路由

示例：

routes: [
            { path:"/",redirect:"/user"},
            { path: "/user", component: User },
            { 
                path: "/login", 
                component: Login,
                children:[
                    { path: "/login/account", component: account },
                    { path: "/login/phone", component: phone },
                ]
            }
        ]

动态路由匹配

1、用name的方式直接传递
routers的name是一个值，接收用{{$router.name}}

2、用router-link to进行传递

<router-link :to="{name:xxx,params:{key:value}}">valueString</router-link>

首先，to需要进行绑定
其次，to之后以对象形式传值
最后 params 再以健值对的方式进行传值

3、props方式传参
一、 props设置为true，绑定id

routes：[
{ path:‘/user/:id’ , component :User , props:true }
]

const User = {
	props :[ 'id ''],
	template :` <div>{{ id }} </div >`

二、 props以对象方式进行传值

router:[
{ path:'/home' , component:home, props: { name :'cocoa' , job :'design' } }
]

const home = {
	props :[ 'name ' , ' job' ],
	template:`template :` <div>{{name  + job}} </div >` `
}

三、props以函数形式进行传值

routes：[{
path:'/home' , component:home , props:routes =>({ name:'COCOA',job :'DESIGN',id:'route.params.id'})
}]

const home = {
	props :[ 'name ' , ' job' ,'id '],
	template:`template :` <div>{{name  + job + id }} </div >` `
}