当前位置：首页 > ai >正文

vue二级路由的写法，以及动态路由的匹配和获取动态参数的值

ai 2025/6/18 9:11:10

在 Vue Router 中，可以通过嵌套路由来实现二级页面。嵌套路由允许在父路由组件中嵌套子路由组件

<div id="app"><div class="navbar"><ul class="nav-navbar"><li><router-link to="/home">home</router-link></li><li><router-link to="/list">list</router-link></li></ul></div><div class="contianer">//<router-view>用于显示子路由的内容<router-view></router-view></div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.13/vue.js"></script>
//加载Vue的路由
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.4.2/vue-router.js"></script><script>//定义Home组件let Home={template:'<h3>这是首页</h3>'};//定义List组件let List={template:`<div><h3>清单页面</h3><ul><li><router-link to="/list/item1">Item 1</router-link></li>  //定义二级路由<li><router-link to="/list/item2">Item 2</router-link></li>    </ul><router-view></router-view>   //显示二级路由的内容</div>`};//定义二级路由的组件let Item1={template:'<h4>item 1 page</h4>'};let Item2={template:'<h4>item 2 page</h4>'};//定义路由的路径和注册组件const routes=[{path:'/home',component:Home},{path:'/list',component:List,//children属性表示子路由children:[{path:'item1',component:Item1},{path:'item2',component:Item2}]}];//创建路由实例并传递routes选项const router=new VueRouter({routes:routes});//创建和挂载根实例const app=new Vue({router}).$mount('#app');</script>

详细说明

定义子路由

在 List 组件中，定义了一个嵌套的 router-view，用于显示子路由的内容。
在路由配置中，/list 路由的 children 属性中定义了子路由 item1 和 item2。

子路由的路径

子路由的路径是相对于父路由的。例如，/list/item1 和 /list/item2 是完整的路径，但在子路由中，它们被定义为 item1 和 item2。

导航链接

在 List 组件中，使用创建了指向子路由的链接。

运行效果

当点击 List 链接时，会导航到 /list，显示 List 页面。
在 List 页面中，有两个链接分别指向 /list/item1 和 /list/item2。
点击这些链接时，会显示对应的子路由组件内容。

在 Vue Router 中，你可以使用动态路由匹配来捕获 URL 中的参数。例如，/list/:page 和 /list/*page
是两种不同的路由匹配模式：

/list/:page：:page 是一个动态段，可以匹配任何值。 /list/*page：*page 是一个通配符，可以匹配任意路径。

在组件中，你可以通过 this. $ro u t e . p a r am s 来访问动态段的值，通过 t hi s .$ route.path 来访问完整的路径。

示例代码

<div id="app"><div class="navbar"><ul class="nav-navbar"><li><router-link to="/home">home</router-link></li><li><router-link to="/list/item1">list/item1</router-link></li>  //这里可不是二级页面或子页面，item1是动态参数<li><router-link to="/list/item2">list/item2</router-link></li>  //这里可不是二级页面或子页面，item2是动态参数<li><router-link to="/list/other/path">list/other/path</router-link></li></ul></div><div class="container"><router-view></router-view></div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.13/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.4.2/vue-router.js"></script>
<script>//定义组件let Home={template:'<h3>这是首页</h3>'};let List={template:`<div><h3>这是清单页</h3><p>动态页面：<strong>{{page}}</strong></p>  <p>全路径：<strong>{{fullPath}}</strong></p></div>`,computed:{//这里是计算page属性,上面的模板获取{{page}}就是这里面的值page(){return this.$route.params.page;},fullPath(){return this.$route.path}}    }//设置路由，/:page表示动态段可以匹配任何值，/*page表示通配符，可以是任何路径const routes=[{path:'/home',component:Home},{path:"/list/:page",component:List},{path:"/list/*page",component:List}];const router=new VueRouter({routes:routes});const vm=new Vue({router}).$mount("#app");
</script>

详细说明

定义动态路由

/list/:page：:page 是一个动态段，可以匹配任何值。
/list/*page：*page 是一个通配符，可以匹配任意路径。
在组件中获取动态参数
使用 this. $ro u t e . p a r am s . p a g e 获取动态段的值。使用 t hi s .$ route.path 获取完整的路径。

导航链接

在导航栏中，使用创建了指向动态路由的链接。
运行效果
当你点击 list/item1 链接时，会导航到 /list/item1，List 组件会显示 page 的值为 item1，fullPath 的值为 /list/item1。
当你点击 list/other/path 链接时，会导航到 /list/other/path，List 组件会显示 page 的值为 other/path，fullPath 的值为 /list/other/path。