vue-router基本使用步骤

1、安装vue-router

第一步使用npm命令下载router,如果是vue2的版本的话,不建议直接安装最新版,不然会报错!!!（别问我怎么知道）

npm i vue-router@3.5.3 -S  

第二步在src文件夹下面再创建一个文件夹,在这个新建的文件夹下创建一个js文件,导入router并使用vue.use()安装router

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter);

第三步创建VueRouter实例,并完成路由映射配置，再导出VueRouter实例。（在配置路由映射关系之前你还必须再创建一个子组件,就是需要跳转的那个组件。）

const routes = [{
  path:"/RouterCnp",
  name:'RouterCnp',
  component:() =>import("../components/RouterCnp")
}];

const router = new VueRouter({
  routes
});

export default router;

第五步在main.js文件中导入router。

import router from './router/index'

new Vue({
  // 第五步
  router,
  render: h => h(App),
}).$mount('#app');

第六步在App.vue组件中通过<router-link></router-link>标签和<router-view></router-view>标签使用即可，最后还要给<router-link>标签设置to属性就完成了vue路由的基本使用啦。

    <router-link to="/RouterCnp">路由</router-link>
    <router-view></router-view>

如果我写的还不错的话就点个攒吧。