- 安装npm install vue-router --save
- 构建路由js:src下建文件router,在建index.js如下
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from "@/components/HelloWorld";
import World from "@/components/World";
Vue.use(Router)
let router = new Router({
routes: [
{
path: '/hello',
component: HelloWorld
},
{
path: '/world',
component: World
},
{
path: '/',
redirect: '/world'
}
]
})
export default router
- 然后后将router文件夹下的index.js挂在到main.js
import Vue from 'vue'
import App from './App.vue'
import router from '@/router/index'
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
render: h => h(App),
})
- 改造一下App.vue:删除多余文件,引入一个视图标签
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App',
components: {}
}
</script>
- OK,模式哈希模式,路由的地址要写在‘#’后面才会生效