vue路由的基本使用

1.安装路由

?

1	npm i vue-router

　　

2.配置路由文件

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

//引入VueRouter import VueRouter from 'vue-router' //引入Luyou 组件 import About from '../components/About' import Home from '../components/Home'   //创建并暴露router export default new VueRouter({     routes:[         {             path:'/about',             component:About         },         {             path:'/home',             component:Home         }     ] })

3.main.js文件

?

1 2 3 4 5 6 7 8 9 10 11 12 13

import Vue from 'vue' import App from './App.vue' import VueRouter from 'vue-router'//引入路由插件 import router from '@/router'//引入路由配置文件   Vue.config.productionTip = false   Vue.use(VueRouter)//使用路由插件   new Vue({   render: h => h(App),   router//路由配置文件 }).$mount('#app')

4.vue文件使用路由

  <!-- 路由链接 -->

?

1 2 3 4 5 6

<router-link class="list-group-item" active-class="active" to="/about">About</router-link> <router-link class="list-group-item " active-class="active" to="/home">Home</router-link>     //页面使用路由 <router-view></router-view>