Vue中如何配置路由vue-router

学习过Vue基础的小伙伴应该知道，再vue脚手架或者引用CDN和vue框架文件时，想要实现页面路由跳转的效果，我们要单独安装 vue-router插件或者引用vue-router文件，这里我们将讲到在脚手架，基础页面中配置一个静态和动态路由。

基础知识:

         在vue中，要想使用vue-router 在vue-cli3 中 安装插件的命令为 npm install vue-router,

在普通三层文件中则需要引用router文件或引用CDN 网址：安装 | Vue Router ,

 

 安装好路由插件或文件后 ，第一步就是创建路由对象。

import Vue from "vue";
import VueRouter from "vue-router";
const one = ()=> import("../components/one.vue");
const two = ()=> import("../components/two.vue");
Vue.use(VueRouter);

const routes = [{
   path:"/",
   components:{
       aa:one,
       bb:two
   }
//    name:"one"
},{
    path:"/one",
    component:one
}];
const router = new VueRouter({
    routes
});
export default router;

当然  目录结构也是需要了解的

上方：  

const one = ()=> import("../components/one.vue");

const two = ()=> import("../components/two.vue");

为路由懒加载， 我们也可以用 import xxx from ‘xxxx’的方式加载子路由文件

配置好路由信息后，利用 export default router 的方式将路由对象导出 ，在main.js中就可以配置和引用我们的路由对象了。

代码如下：

import Vue from 'vue'
import App from './App.vue'
import Store from './store/store';
import router from './router/router';
import axios from 'axios';

Vue.config.productionTip = false;
Vue.prototype.$axios = axios;
Vue.prototype.$store = Store

new Vue({
  render: h => h(App),
  Store,
  router
}).$mount('#app')

路由应用后 我们可以将路由信息打印以及验证是否成功配置到vue中

 可以打印出来 

 说明我们的路由已经利用成功

那么我们就可以用 <router-link>  和 <router-view> 两种标签来渲染路由跳转链接和渲染位置 

<template>
  <div id="app">
    <router-view name="bb"></router-view>
    <button @click="getRouter">打印路由对象</button>
    <button @click="getStore">打印Vuex对象</button>
    <button @click="getAxios">打印axios对象</button>
    <router-link tag="p" to="/one">去往想去的子路</router-link>
    <router-link tag="p" to="/two">去往第二个路由页面</router-link>
    <router-view name="xx"></router-view>
    <button @click="urlChange">编程式路由跳转</button>
    <router-view></router-view>
  </div>
</template>

点击后将会显示对应的路由页面，url地址栏相应也会发生改变

路由守卫与编程导航 ，可以在官网中查看到 导航守卫 | Vue Router

本期知识点就分享到这了，我是个三观超正的前端学习博主，期待你的关注