vue 路由的基本使用_vue query路由怎么注册-优快云博客

本文链接：https://blog.youkuaiyun.com/xvzhengyang/article/details/105838441

本文详细介绍Vue.js中路由的创建、嵌套及参数传递的方法。包括路由的基本配置、使用$router.push进行跳转、通过children属性实现子路由，以及如何利用params和query方式传递参数。

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

1.路由创建

export const routes = [

{path: "/", name: "homeLink", component:Home}

{path: "/register", name: "registerLink", component: Register},

{path: "/login", name: "loginLink", component: Login},

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

]

插入:路由跳转

this.$router.push(‘路由地址’)

路由地址 {

   }



2.路由嵌套

routes: [

{

path: '/account',

component: account,

// 使用 children 属性，实现子路由，同时，子路由的 path 前面，不要带 / ，否则永远以根路径开始请求，这样不方便我们用户去理解URL地址

children: [

{ path: 'login', component: login },

{ path: 'register', component: register }

]

}

// { path: '/account/login', component: login },

// { path: '/account/register', component: register }

]



3.路由传参(

利用url传递参数----在配置文件里以冒号的形式设置参数。

)

id 和 name是传参;

通过 `this.$route.params`

来获取路由中的参数： 

{

this.$route.params.id

}

可以获取

{

path: '/skillone/:id/:name',

name: 'SkillOne',

component: SkillOne

},

路由传参(使用path来匹配路由，然后通过query来传递参数)

this.$router.push({

path: "/project/houseaccount",

query: {

projectId: this.projectId

}

});

获取参数

this.$route.query.projectId