vue（6）——前端路由vue-router

摘要

        前端路由就是用来管理你输入什么url来显示什么页面的。具体的使用如下：

vue-router的使用

        如果你使用脚手架的话，可以直接在src目录下的router目录 里面的index.js文件直接引入组件并配置路由。

1、安装vue-router（在脚手架中可以直接选择），npm install vue-router

2、在src目录下创建一个router目录， 里面创建一个index.js文件 ， 这个目录就是router的模块

3、在2中创建的index.js中引入第三方的依赖包

import VueRouter from 'vue-router'

4、创建router对象实例，并导出实例

const home = () =>
    import ("@/views/home/home");
const routes = [{
    path: '/',
    redirect: "/home"
}, {
    path: '/home',
    component: home
}]

const router = new VueRouter({
    routes,
    mode: 'history'
})



export default router;

5、在main.js中引入router实例对象

import router from './router'

6、在vue事例中注册

new Vue({
    router,
    store,
    render: function(h) { return h(App) }
}).$mount('#app')