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

const router = new VueRouter({
  routes // routes: routes 的簡(jiǎn)寫(xiě)
})

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 定義點(diǎn)擊后導(dǎo)航到哪個(gè)路徑下 -->
  <router-link to="/home">Home</router-link>
  <router-link to="/about">About</router-link>
 </header>
 <!-- 對(duì)應(yīng)的組件內(nèi)容渲染到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 一定要小寫(xiě)， 不要寫(xiě)成Router, 否則報(bào) can't match的報(bào)錯(cuò)
new Vue({
 el: '#app',
 router, // 注入到根實(shí)例中
 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>
  <!-- 增加兩個(gè)到user組件的導(dǎo)航，可以看到這里使用了不同的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路徑，配置了動(dòng)態(tài)的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組件, 動(dòng)態(tài)部分是{{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表示的是你要去的那個(gè)組件，from 表示的是你從哪個(gè)組件過(guò)來(lái)的，它們是兩個(gè)對(duì)象，你可以把它打印出來(lái)，它們也有一個(gè)param 屬性
    console.log(to);
    console.log(from);
    this.dynamicSegment = to.params.id
   }
  }
 }
</script>

<template>
 <div>
  <h1>home</h1>
<!-- router-link 的to屬性要注意，路由是先進(jìn)入到home,然后才進(jìn)入相應(yīng)的子路由如 phone,所以書(shū)寫(xiě)時(shí)要把 home 帶上 -->
  <p>
   <router-link to="/home/phone">手機(jī)</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",
　　　　　// 下面這個(gè)屬性也不少，因?yàn)?，我們是先進(jìn)入home頁(yè)面，才能進(jìn)入子路由
  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
 },
 // 當(dāng)進(jìn)入到home時(shí)，下面的組件顯示
 {
  path: "",
  component: phone
 }
]

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

 <router-link to="/user/123">User123</router-link> // 和下面等價(jià) 
 <router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link> // 當(dāng)使用對(duì)象作為路由的時(shí)候，to前面要加一個(gè)冒號(hào),表示綁定