vue 配置路由问题

废话不多说，直接开干！

直接在./src/main.js配置即可

0.创建项目
1.安装vue-router
npm install vue-router --save

import Vue from 'vue'
import App from './App.vue'

import VueRouter from 'vue-router';
Vue.use(VueRouter);

//1.创建组件
import Home from './components/Home.vue';
import New from './components/New.vue';
import Hello from './components/HelloWorld.vue';
//2.配置路由
const routes=[
  {path:'/home',component:Home},
  {path:'/news',component:New},
{path:'/',component:Hello}
  // {path:'/',redirect:'/Hello'}
]

//3.实例化VueRouter
const router=new VueRouter({
  routes
})

//4.挂载路由
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

//5.在根组件App.vue的模板中，放入<router-view></router-view>

在src/App.vue中

<template>
  <div id="app">
     <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg:'你好'
    }
  }    
}
</script>
<style>
</style>