什么创网站网页设计素材与效果图

在 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>

详细说明

1. 定义子路由

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

2. 子路由的路径

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

3. 导航链接

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

4. 运行效果

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

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

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

在组件中，你可以通过 this.$route.params来访问动态段的值，通过this.$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>

详细说明

1. 定义动态路由

/list/:page：:page 是一个动态段，可以匹配任何值。
/list/*page：*page 是一个通配符，可以匹配任意路径。
在组件中获取动态参数
使用 this.$route.params.page获取动态段的值。使用this.$route.path 获取完整的路径。

2. 导航链接

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

3. 注意事项

动态段和通配符的区别
动态段（如 :page）只能匹配单个路径段。
通配符（如 *page）可以匹配任意路径，包括多个路径段。

路由冲突
如果同时定义了 /list/:page 和 /list/*page，Vue Router 会根据定义的顺序匹配路由。因此，建议避免同时使用这两种模式，以免产生冲突。

{{ page }} 和 {{ fullPath }} 是模板语法，用于绑定数据到模板中。这些数据可以来自组件的 data、props、computed 或 methods

1. page 计算属性

page 是一个计算属性，它的值依赖于 this.$route.params.page。每当this.$route.params.page 发生变化时，page 会自动重新计算。

2. fullPath 计算属性

fullPath 是一个计算属性，它的值依赖于 this.$route.path。每当this.$route.path 发生变化时，fullPath 会自动重新计算。

3. 模板绑定

在模板中，{{ page }} 和 {{ fullPath }} 会自动绑定到对应的计算属性。
Vue 会确保这些值是响应式的，即当路由变化时，模板会自动更新。