Vue路由的使用

一.路由的理解

什么是路由？

​ 1.一个路由就是一组映射关系（key-value）

​ 2.key为路径，value可能是function或component

路由分类：

​ 1.后端路由：

• 理解：value是function，用于处理客户端提交的请求
• 工作过程：服务器接收到一个请求时，根据请求路径找到匹配的函数来处理请求，返回响应数据

2.前端路由

• 理解：value是component，用于展示页面内容
• 工作过程：当浏览器的路径改变时，对应的组件就会显示

二，vue-router的理解

vue的一个插件库，专门用来实现SPA应用

三，对SPA应用的理解

• 单页web应用（single page web application ）
• 整个应用只有一个完整的页面
• 点击页面的导航链接不会刷新页面，只会做页面的局部更新
• 数据需要通过Ajax请求获取

四，vue的相关使用

1.安装vue-router,命令：npm i vue_router
2.应用插件：Vue.use(VueRouter)
3.编写router配置项
//引入vueRouter
import VueRouter from 'vue-router'
//引入要显示的组件
import home from '../comonents/home'
//创建router实例对象，去管理一组一组的路由规则
const roter = new VueRouter({
    routes:[
        {
            path:'abouts',
            component:About
        },
        {
            path:'/home',
            compontent:Home
        }
    ]
})
//暴露router
export default router
4.实现切换（active-class可配置高亮样式）
About
5.指定展示位置

 五，Vue路由案例

//router文件夹下的index.js文件
//该文件专门用于创建整个应用的路由器
import VueRouter  from "vue-router"
import homeRouter from '../components/homeRouter'
import AboutRouter from '../components/aboutRouter'
 
// 创建并暴露一个路由器
export default new VueRouter({
    routes: [
        {
            path:'/about',
            component:AboutRouter
        },
        {
            path:'/home',
            component:homeRouter
        }
    ]
})

 

//main.js
import Vue from 'vue'
import App from './app.vue'
// 引入store
import store from './store/index'
// 引入VueRouter
import VueRouter from 'vue-router'
// 引入路由器
import router from './router'
// 关闭Vue的生产提示
Vue.config.productionTip = false
// 应用创建
Vue.use(VueRouter)
 
new Vue({
  store,
  router:router,
  render: h => h(App),
  beforeCreate(){
    Vue.prototype.$bus=this
  }
}).$mount('#app')
 

//app.vue
<script>
 
export default({
    name:'App',
   
})
script>
<style scoped>
    a{
        text-decoration: none;
    }
    .list-group a{
        display: block;
        width: 100px;
        border: 2px solid gray;
    }
    a:hover{
        background-color: skyblue;
    }
    .page-body{
        display: flex;
    }
style>
 

 

//aboutRouter.vue
<template>
  <div>
      <h3>我是about的内容h3>
  div>
template>
 
<script>
export default {
    name:'aboutRouter'
}
script>
 
<style>
 
style>

//homeRouter.vue
<template>
  <div>
      <h3>我是home的内容h3>
  div>
template>
 
<script>
export default {
    name:'homeRouter'
}
script>
 
<style>
 
style>

 如图所示：

 六，Vue中几个注意点

• 路由器显示组件通常存放在page文件夹，一般组件通常存放在component文件夹
• 通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载
• 每个组件都有自己的$route属性，里面存储着自己的路由消息
• 整个应用只有一个router，可以通过组件的$router属性获取到