Vue：路由及默认的跳转

第一步：在新建的components目录下创建如下所示的两个组件： Home.vue

  
     {{msg}}
  


  export default {
    data() {
      return {
        msg: 'Home首页'
      }
    }
  }

News.vue

  
    {{msg}}
  


  export default {
    data() {
      return {
        msg: 'News头部',
      }
    }
  }

第二步：修改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

  
    Home
    News
    
    
  


  export default {
    name: 'app'
  }

页面效果 默认页面

Home页面

News页面