Vue：路由及默認的跳轉

第一步：在新建的components目錄下創建如下所示的兩個組件：

Home.vue

<template>
  <div>
    <h2> {{msg}}</h2>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        msg: 'Home首頁'
      }
    }
  }
</script>

News.vue

<template>
  <div>
    <h2>{{msg}}</h2>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        msg: 'News頭部',
      }
    }
  }
</script>

第二步：修改main.js的代碼如下所示：

import Vue from 'vue';
import App from './App.vue';
// 引入並使用vue-router
import VueRouter from 'vue-router';
Vue.use(VueRouter);
// 引入組件
import Home from './components/Home';
import News from  './components/News';
//定義路徑
const routes = [
  { path: '/home', component: Home },
  { path: '/news', component: News },
  { path: '*', redirect: '/home' }   /*默認跳轉路由*/
]
//實例化VueRouter
const router = new VueRouter({
  routes
})
//掛載
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

第三步：App.vue

<template>
  <div id="app">
    <router-link to="/home">Home</router-link>
    <router-link to="/news">News</router-link>
    <hr>
    <router-view></router-view>
  </div>
</template>
<script>
  export default {
    name: 'app'
  }
</script>

頁面效果

默認頁面

Home頁面

News頁面