Vue-router 的简单配置及使用

安装

如果你的脚手架尚未安装vue-router请使用以下代码进行安装：
npm install vue-router --save

引入

1、在main.js中引入:
import router from ‘./router’;

new Vue({
render: h => h(App),
router
}).$mount(’#app’)
2、在src文件夹中创建router文件夹，然后在该文件夹中创建index.js或者直接在src文件夹下创建router.js不过这里推荐第一种方式，然后在该文件中写入:
import Vue from ‘vue’
import Router from ‘vue-router’
//这里导入需要跳转的组件例如:
import hello from ‘@/components/hello.vue’ //这里@/components做了一个路径别名配置不懂的同学可以点击vue如何配置别名学习

export default new Router({
routes: [
{path: ‘/hello’, name:‘hello’,component: hello},//配置跳转到"hello"组件的路径
]
})
3、在App.vue下引入支持vue-router:

点击此处跳转到hello组件 //这个标签表明引入支持router

通过这三步就可以简单实现router啦