Vue 路由及路由跳转

让根组件自动的挂载其它组件，而不是手动挂载。

1. 安装：

cnpm install vue-router --save

2. 在main.js中引入并使用vue-router

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

3. 配置路由

1. 创建组件并在App.vue中引入组件

• Home.vue

  
    {{msg}}
  


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

• News.vue

  
    {{msg}}
  


    export default {
        data(){
          return{
            msg:"News"
          }
        }
    }

配置路由

const routes = [
  { path: '/home', component: Home },
  { path: '/news', component: News },
  { path: '/*', redirect: '/home' }   /*默认跳转路由*/
]

实例化VueRouter

const router = new VueRouter({
  routes // （缩写）相当于 routes: routes
})

挂载

new Vue({
  el: '#app',
  router，
  render: h => h(App)
})

根App.vue组件的模板里面加上（根据路由动态加载的组件）：

到此启动项目，就可以查看页面了： 默认页面

Home页面

News页面

路由跳转

Home
News

最终显示效果：

单击Home和News时，分别打开不同的页面