vue开发vue-router 前端路由的学习和使用(扩张知识)

一、前端路由

1.前端路由的发展

后端渲染阶段：后段路由进行对jsp界面的选择加载

前后端分离阶段：从静态服务器（例如：Apache服务器）选择对应界面信息

前端渲染阶段：前端路由通过相应的请求数据进行界面/组件的切换选择加载

2.vue-router 安装挂载介绍

1.首先我们打开终端通过npm安装vue-router插件

npm install vue-router --save

2.新建router文件夹并且创建index.js的文件作为vue-router的引用（对应的js文件内容）

import Vue from 'vue'   //引入vue

import Router from 'vue-router'  //引入vue-router

Vue.use(Router)   //将vue-router挂载到vue中

export default new Router({  //导出new的vue - router 实例对象

})

3.在项目main.js中引入相对应的index.js文件，并且进行注册（实现）

import Vue from 'vue'

import App from './App'

import router from './router'  //引入相对路径对应的文件

Vue.config.productionTip = false

new Vue({

    el: '#app',
    
    router,  //注册router对象
    
    render: h => h(App)
})

3.vue-router实际使用

通过上面的安装、创建实例以及挂载完成，我们已经将对应的环境充分构建完成，接下来就是实际是使用：
1.创建对应的组件例如：

2.在路由进行引入组件

import Vue from 'vue'

import Router from 'vue-router'

const HelloWorld = () =>
    import ('@/components/HelloWorld')  // 懒加载 引入HelloWorld组件
    
import Home from '../view/home'   //正常加载 引入Home组件

import Personal from '../view/personal'  //引入Personal组件

Vue.use(Router)
//定义路由规则
const routes = [        
  {
    path: '/',
    name: 'HelloWorld',
    component: HelloWorld
  },
  {
    path:'/home',   //路径添加’/home‘时进行跳转
    name:'Home',  //区别于组件之间的命名
    component:Home  //对应的组件对象
  },
  {
    path:'/personal',
    name:'Personal',
    component:Personal
  }
]

export default new Router({
  routes
})

3.对默认引入的HelloWorld组件进行重构

跳转到对应的界面链接：

点击跳转相对应路径：

4.路由的其他扩张

路由懒加载

-> Es6 语法的懒加载结构

const HelloWorld = () =>

    import ('../components/HelloWorld')  // 懒加载 相对路径 引入HelloWorld组件

->common.js的规范

{path:'/home',componet:()=>import('./components/HelloWorld')}

->AMD规范

const  HelloWorld  = resolve => require(['./components/HelloWorld'],resolve)

路由传参

1.通过动态路由 路径进行传参

routes:[
{
path:'/home/:id',
component:Home
}
]

获取时 :

$route.params.id  //进行获取组件的id属性

2.通过query进行传递数据

this.$router.push({path: '/detail', query: {name:'Eric'}})

获取数据时：

$route.query    //获取对应的query的数据

子路由的定义

父组件 HelloWorld 子组件 HelloWorldChild
路由定义中
const routes = [
{path:’/home’,
component:HelloWorld,
children:[
{
path:‘helloworldchild’, //路径前不用加“/”，如果加了的话会被当成根路由
component:HelloWorldChild
}
]
},
]