vue路由vue-router的安装和使用

1.安装，如果你没有在创建项目时候选择的情况下 cnpm install vue-router

2.使用假设App为根组件，两个自定义组件home及list

main.js里操作

import Vue from 'vue'
import App from './App.vue'
// 引入路由
import VueRouter from 'vue-router'

Vue.use(VueRouter)

// 引入组件
import Home from './components/Home'
import List from './components/List'

// 配置路由
const routes = [
  { path: '/home', component: Home },
  { path: '/list', component: List },
  { path: '*', redirect: '/home' }   /*默认跳转路由*/
]

// 实例化路由
const router = new VueRouter({
  routes // （缩写）相当于 routes: routes
})

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

app组件

<template>
  <div >
    <router-link to="/home">首页</router-link>
    <router-link to="/list">列表</router-link>

    <!--放置路由-->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<style>
</style>

home

<template>
  <div>
    home组件
  </div>
</template>
<script>
export default {
  data () {
    return {
    }
  }
}
</script>

效果

vue路由vue-router的安装和使用