Vue路由的使用

Vue路由的使用

首先需要安装vue-router，命令：npm i vue-router

新建一个router文件夹，创建index.js

main.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false
//使用VueRouter插件
Vue.use(VueRouter)

new Vue({
    render: h => h(App),
    router: router
}).$mount('#app')

index.js

//引入文件，该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
//引入组件
import About from '../components/Home'
import Home from '../components/About'

//创建并暴露一个路由器
export default new VueRouter({
    routes: [              //这里是routes不是router 我错了两次了
        {
            path: '/about',
            component: About
        },
        {
            path: '/home',
            component: Home
        }
    ]
})
14
15
16
17
18
19

在页面中使用

<router-link active-class="active" to="/about">About</router-link>
<router-link active-class="active" to="/home">Home</router-link>
<router-view><router-view>
1
2
3