Vue-路由插件集成和配置

1.相关认识

　　后端路由:对于前端的网络请求,不同的pathname,去执行后端的不同业务

　　前端路由:不同的网址对应各自的页面

　　 vue的前端路由:SPA应用要做出路由效果,就得判断当前网址,然后切换组件 vue-router就是专门做切换组件的功能,它是一个单独的技术,依赖vue 就像jQuery和dom操作一样

2.路由引入 

　　1. 自己npm下载引入使用

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

//安装到项目中:  npm i vue-router --save-dev//注意:这种下载不好,因为打包之后容易出问题  npm i vue-router --save或者 npm i vue-router --S           在main.js入口文件中引入  import Vue from "vue"  import VueRouter from "vue-router"//引入路由工具  import App from "./App.vue"  Vue.use(VueRouter)//注入路由,就是运行路由的相关函数和给vue绑定东西:比如$router     //创建路由工具  const router=new VueRouter({      //routes路由器 生成很多网址对应的切换组件      routes:[{path:"/home",component:()=>import("./home.vue")},              {path:"/about",component:()=>import("./about.vue")}]  })  new Vue({      router,//把路由挂载到页面      render(h){return h(App)}  }).$mount("#app")    //在App.vue中写 <router-view></router-view>

　　

　　2.cli安装 vue create xxapp 空格键选择router然后回车 自动就会把路由安装好

3.index页面的解析

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

//引入Vue webpack打包时如果已经打包过了 就不会打包了 //所以这行代码时为了当前文件中不报错  但是实质打包时并不会打包,因为main.js中已经打包了 import Vue from 'vue' //引入路由插件 import VueRouter from 'vue-router'   //引入首页组件:一开始就会打包,因为首页一般是用户直接访问的页面 import Home from '../views/home/index.vue'   //给组件的原型链绑定功能: this.$router  this.$routes Vue.use(VueRouter)     //注册路由 const routes = [   {     path: '/',     name: 'home',     component: Home   },   {     path: '/login',     name: 'login',     component: () => import('../views/login/index.vue')   } ]   //配置路由规则 const router = new VueRouter({   mode: 'history',   routes })   export default router