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页面