vue2中如何使用vue-router（步骤）

一只桃子~

已于 2022-07-21 17:07:54 修改

阅读量2k

点赞数

文章标签： vue.js 前端 javascript

于 2022-07-20 13:45:04 首次发布

本文链接：https://blog.csdn.net/qq_43405603/article/details/125887317

版权

1、安装 vue-router

vue2 npm i vue-router@3

2、新建router文件夹，里边放置index.js,引入,使用，配置，注册，导出

import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter);

const routes=[
{
  path:"/",
  name:"Index",
  component:()=>import("../view/Index.vue"),
  meta:{title:"首页"}，

},
{
  path:"/one",
  name:"One",
  component:()=>import("../view/One.vue"),
  meta:{title:"One页"}，

}]

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

export default router

3、在main根上引入以上文件夹，并注册

    import Vue from "vue";
    import App from "./App";
    import router from "./router/index.js" //引入你新建的router文件
    Vue.config.productionTip=false;
    new Vue({
         el:"#app",
         router, //在根上注册router
         render:h=>h(App)
})