vue2 - router 的基本使用，安装router，配置router，router 标签

1.安装router

npm install vue-router

 

2.定义router路由导航 src/router/index.js

import Vue from "vue";
import VueRouter from "vue-router";
//引入组件
import AppHome from "@/components/AppHome";
import AppShow from "@/components/AppShow";

//使用Router
Vue.use(VueRouter)

export default new VueRouter({
  routes: [
    {
      path: "/home",
      component: AppHome,
      name: "AppHome"
    },
    {
      path: "/show",
      component: AppShow,
      name: "AppShow"
    }
  ]
})

 

3.使用router（main.js）

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

import router from "@/router";

Vue.config.productionTip = true
new Vue({
  render: h => h(App),
  //使用router
  router
}).$mount('#app')

 

4.router标签

//跳转标签
<router-link to="/home">Home页</router-link>
<router-link to="/show">Show页</router-link>

//显示相关内容标签
<router-view></router-view>