Vue2.0 router.js的编写

Coding_one_

墨衍会员 · AI 创作全网分发码龄4年

关注

原创最新推荐文章于 2024-12-26 13:52:38 发布 315 阅读 AI 写同款· GEO 优化 ›

限时加码！20+主流AI编程工具免费用购周边加赠Coding Plan Lite，Claude Code、Cursor等即刻畅享，学习进阶更高效！阅读详情

要先下载router

npm install router

在router.js中我们需要用vue的方式加载它，引用router,再使用Vue.use加载这个插件

import Vue from 'vue'
import Router from 'vue-routr'
Vue.use(Router)

export default是导出router

import Vue from 'vue'
import Router from 'vue-routr'
Vue.use(Router)

export default new Router({

});

路由的配置

export default new Router({
    routes:[{
    path:'/',
    name:'home',      
    component:Home   //组件
    }
}]

配置好后，需要引入组件，导入组件，在route,js文件开头导入我们项目一开始创建的home组件

import Vue from 'vue'
import Router from 'vue-routr'
import Home from './components/home.vue' //导入home组件
Vue.use(Router)

home路由是根路由，接下来要设置在home路由下跳转的子路由

export default new Router({
    routes:[{
    path:'/',
    name:'home',      
    component:Home，  //组件
    children:[{
        path:'/index',
        name:'index',      
        component:Index //组件
        }]
    }
}]

每次配置路由引入组件后，都需要在该js文件开头导入该组件

import Vue from 'vue'
import Router from 'vue-routr'
import Home from './components/home.vue'
import Index from './components/index.vue'  //导入index组件
Vue.use(Router)