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

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 使用 vueRouterVue.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前面要加一个冒号,表示绑定