Vue-路由插件集成和配置

1.相关认识

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

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

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

2.路由引入 

　　1. 自己npm下载引入使用

 //安装到项目中:
 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页面的解析

//引入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