嵌套路由
通过路由实现组件的嵌套展示
在about内嵌套路由
<template> <div class="about-container"> <h3>About 组件</h3> <!-- 子级路由链接 --> <router-link to="/about/tab1">tab1</router-link> <router-link to="/about/tab2">tab2</router-link> <hr> <!-- 子级路由占位符 --> <router-view></router-view> </div> </template>
在router的indexjs(包含重定向)
{path : '' , component : Tab1}, 为默认子路由可以不使用重定向,
使用默认子路由可以将 <router-link to="/about">tab1</router-link> about后省略
import Vue from "vue"; import VueRouter from "vue-router"; import Home from '../components/Home.vue' import Movie from '../components/Movie.vue' import About from '../components/About.vue' import Tab2 from '../components/tabs/Tab2.vue' import Tab1 from '../components/tabs/Tab1.vue' Vue.use(VueRouter) const router = new VueRouter({ //router是一个数组,定义hash地址和组件之间的关系 routes : [ //重定向路由规则 {path : '/', redirect :'/home'}, {path : '/home', component:Home}, {path : '/movie', component:Movie}, {path : '/About', component:About , children : [ {path : '' , component : Tab1}, {path : 'tab2' , component : Tab2} ]} ] }) export default router
动态路由匹配
this.$route是路由的参数对象
this.$router是路由的导航对象
APP.vue
<router-link to="/movie/1">洛基</router-link> <router-link to="/movie/2">雷神</router-link> <router-link to="/movie/3">蜘蛛侠</router-link>
router内index.js
//需求:在movie组件中,根据id值展示对应详情信息 {path : '/movie/:id', component:Movie},
为路由器开启props传参
router的index
{path : '/movie/:mid', component:Movie , props:true},
movie.vue
<script> export default { name: 'Movie', //接受props数组 props : ['mid'], methods : { shouTimes(){ console.log(this) } } } </script>
<!-- 在哈希地址中 / 后面的参数项叫路径参数 -->
<!-- 在路由参数对象中使用this.$route.params来访问 -->
<!-- 在哈希地址中 ? 参数是 查询参数 -->
<!-- 在路由 参数对象 中,需要使用this.$route.query来访问查询参数 -->
<!-- 在this.$route中path只是路径部分,full.path才是完整 -->