全面解析vue router 基本使用(动态路由，嵌套路由)

路由，其实就是指向的意思，当我点击页面上的home按钮时，页面中就要显示home的内容，如果点击页面上的about 按钮，页面中就要显示about 的内容。Home按钮  => home 内容， about按钮 => about 内容，也可以说是一种映射. 所以在页面上有两个部分，一个是点击部分，一个是点击之后，显示内容的部分。 

const routes = [
 { path: '/home', component: Home },
 { path: '/about', component: About }
]

const router = new VueRouter({
 routes // routes: routes 的简写
})

const app = new Vue({
 router
}).$mount('#app')

<template>
 <div>
 <h1>home</h1>
 <p>{{msg}}</p>
 </div>
</template>
<script>
 export default {
 data () {
 return {
 msg: "我是home 组件"
 }
 }
 }
</script>
<template>
 <div>
 <h1>about</h1>
 <p>{{aboutMsg}}</p>
 </div>
</template>
<script>
 export default {
 data () {
 return {
 aboutMsg: '我是about组件'
 }
 }
 }
</script>

<template>
 <div id="app">
 <img src="./assets/logo.png">
 <header>
 <!-- router-link 定义点击后导航到哪个路径下 -->
 <router-link to="/home">Home</router-link>
 <router-link to="/about">About</router-link>
 </header>
 <!-- 对应的组件内容渲染到router-view中 -->
 <router-view></router-view> 
 </div>
</template>
<script>
export default {
 
}
</script>

import Vue from "vue";
import VueRouter from "vue-router";
// 引入组件
import home from "./home.vue";
import about from "./about.vue";
// 要告诉 vue 使用 vueRouter
Vue.use(VueRouter);
const routes = [
 {
 path:"/home",
 component: home
 },
 {
 path: "/about",
 component: about
 }
]
var router = new VueRouter({
 routes
})
export default router;

import Vue from 'vue'
import App from './App.vue'
// 引入路由
import router from "./router.js" // import router 的router 一定要小写， 不要写成Router, 否则报 can't match的报错
new Vue({
 el: '#app',
 router, // 注入到根实例中
 render: h => h(App)
})

const routes = [
 {
 path:"/home",
 component: home
 },
 {
 path: "/about",
 component: about
 },
 // 重定向
 {
 path: '/', 
 redirect: '/home' 
 }
]

<template>
 <div id="app">
 <img src="./assets/logo.png">
 <header>
 <router-link to="/home">Home</router-link>
 <router-link to="/about">About</router-link>
 <!-- 增加两个到user组件的导航，可以看到这里使用了不同的to属性 -->
 <router-link to="/user/123">User123</router-link>
 <router-link to="/user/456">User456</router-link>
 </header>
 <router-view></router-view> 
 </div>
</template>

const routes = [
 {
 path:"/home",
 component: home
 },
 {
 path: "/about",
 component: about
 },
 /*新增user路径，配置了动态的id*/
 {
 path: "/user/:id",
 component: user
 },
 {
 path: '/', 
 redirect: '/home' 
 }
]

<template>
 <div>
 <h1>User</h1>
 <div>我是user组件</div>
 </div>
</template>
<script>
 export default {
 }
</script>

<template>
 <div>
 <h1>User</h1>
 <div>我是user组件, 动态部分是{{dynamicSegment}}</div>
 </div>
</template>
<script>
 export default {
 computed: {
 dynamicSegment () {
 return this.$route.params.id
 }
 }
 }
</script>

<script>
 export default {
 data () {
 return {
 dynamicSegment: ''
 }
 },
 watch: {
 $route (to,from){
 // to表示的是你要去的那个组件，from 表示的是你从哪个组件过来的，它们是两个对象，你可以把它打印出来，它们也有一个param 属性
 console.log(to);
 console.log(from);
 this.dynamicSegment = to.params.id
 }
 }
 }
</script>

<template>
 <div>
 <h1>home</h1>
<!-- router-link 的to属性要注意，路由是先进入到home,然后才进入相应的子路由如 phone,所以书写时要把 home 带上 -->
 <p>
 <router-link to="/home/phone">手机</router-link>
 <router-link to="/home/tablet">平板</router-link>
 <router-link to="/home/computer">电脑</router-link>
 </p>
 <router-view></router-view>
 </div>
</template>

const routes = [
 { path:"/home",
　　　　　// 下面这个属性也不少，因为，我们是先进入home页面，才能进入子路由
 component: home,
　　　　 // 子路由
 children: [
 {
 path: "phone",
 component: phone
 },
 {
 path: "tablet",
 component: tablet
 },
 {
 path: "computer",
 component: computer
 }
 ]
 },
 {
 path: "/about",
 component: about
 },
 {
 path: "/user/:id",
 component: user
 },
 {
 path: '/', 
 redirect: '/home' 
 }
]

children: [
 {
 path: "phone",
 component: phone
 },
 {
 path: "tablet",
 component: tablet
 },
 {
 path: "computer",
 component: computer
 },
 // 当进入到home时，下面的组件显示
 {
 path: "",
 component: phone
 }
]

{
 path: "/user/:id",
 name: "user",
 component: user
}

 <router-link to="/user/123">User123</router-link> // 和下面等价 
 <router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link> // 当使用对象作为路由的时候，to前面要加一个冒号,表示绑定