Vue2 Router 路由器的使用_1

概念：

     路由：是一个key-value的对应关系叫路由。

     路由器：管理多个路由的集合或者叫设备称为路由器。

在vue中的路由：

    路由：是配置一个路径对应显示哪一个组件；路径---组件。

    路由器：管理多个路由配置的.js文件。

为什么需要路由：

    vue的开发与mvc不同，它是单文件系统，就是整个系统只有一个index.html页面，而所有的业务都是通过组件去维护，这样的好处是页面不会跳动，也就不会有页面加载的过程，用户体验会更好。

   当vue项目有很多个业务组件，当我们设计系统菜单时就需要告诉menu点击哪个按钮显示哪个组件，这样不用我们自己去写，我们配置一下vue就帮我们处理好。

开始实现vue单文件路由配置：

     1.安装路由：npm i vue-router@3     VUE2安装路由3，vue3安装路由4；

     2.在src下建立router文件夹中建立一个RouterIndex.js这个js就是路由器。

     3.RouterIndex.js中的路由配置；

//该页面专门用于维护路由器

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

//引入组件，理解为每个页面
import ClassPage from '../components/routerPages/banji'
import StudentPage from '../components/routerPages/xuesheng'

//创建并暴露 路由器
export default new Vrouter({
    routes:[
        {
            name:'banji',//命名路由,:to="{name='banji'}"
            path:'/class',  //当路径是 /class时，内容区就显示ClassPage这个组件。
            component:ClassPage
        },
        {
            path:'/student',
            component:StudentPage
        }
    ]
});

       4,去创建配置中引入的组件；

            4.1可以在components中建立一个文件夹routerPages。

            4.2在routerPages下建立banji  和  xuehseng  两个组件，写自己的页面内容；

       5.在Main.js中引入vue-router并使用vue.use();

       6.在Main.js中引入自己写的路由器,并配置到vue中，所有组件都受路由的管理。

       Main.js如下：

import Vue from "vue";
import App from "./App";
import store from './Content/Vuex/Store'
//引入vue-router
import VueRouter from 'vue-router'
//引入自己写的路由器
import Router from './router/RouterIndex'

//关闭产品提示
Vue.config.productionTip=false;
//应用插件
Vue.use(VueRouter);
//vue 实例
new Vue({
  el: "#app",
  //template:'',// `<div id="app1"></div>`,//模版，往#app中放html
  render: (h) => h(App),//注册组件
  beforeCreate() {//钩子
    Vue.prototype.$bus=this;//安装全局事件总线
  },
  store,//配置vuex
  router:Router
});



//脚手架的配置安装：
//1.cmd脚手架淘宝镜像:npm config set registry https://registry.npm.taobao.org
//2.安装： npm install -g @vue/cli
//3.dos:  vue create vue_test 创建脚手架     babel es6->es5   ,eslint语法检查
//3.启动：nmp run serve

   7.页面的呈现；

   在App.vue中或者别的组件中都可以写好菜单，写好放置组件的地方；这好比我们写mvc页面设计菜单与主功能区域；

 注意的是：菜单需要安装router的规定写法比如

<div class="list-group">
                    <router-link class="list-group-item" active-class="active" to="/class">班级</router-link>
                    <router-link class="list-group-item"  active-class="active" to="/student">学生</router-link>
</div>

router-link：路由规定的写法只有这样才能起作用他会生成A标签，后面我们会学习别的路由按钮。

to="/class"：这个特别重要，要与路由器中写的一致，就是告诉路由我要看这个组件。

active-class="active"：这个就是点击哪个按钮 就会加上active类样式。

内容区：

<div class="panel-body">
                        <router-view></router-view>
</div>

router-view：只有用这个路由才知道组件放着这里显示。

题外话：我在public下新建了css 文件夹  里面放了bootstrap的js.然后在index.html引入，这样所有组件都能用了。

多级路由

     意思是在一个路由组件下还有组件切换，路由嵌套；

与上面的路由差不多就是配置修改为：

children配置子路由；

//创建并暴露 路由器
export default new Vrouter({
    routes:[
        {
            path:'/class',  //当路径是 /class时，内容区就显示ClassPage这个组件。
            component:ClassPage,
            children:[//##############嵌套路由
                {
                    path:'sonPage',//这里主要不要斜杠了
                    component:sonPage
                }
            ]
        },
        {
            path:'/student',
            component:StudentPage
        }
    ]
});

调用路由为：to后面需要带上父路径。

<router-link class="list-group-item" active-class="active" to="/class/sonPage">班级</router-link>

路由传递参数

1  query传递：

//方法1
<router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">跳转</router-link>
//方法2 推荐
<router-link :to="{
	path:'/home/message/detail',
	query:{id:m.id,title:m.title}
}">跳转</router-link>

接收使用参数：

//取数据
<span>{{$route.query.id}}<span>
<span>{{$route.query.title}}<span>

2   params传递：

 路由设置 path:"detail/：id/：title"

传递   to中只能用name.

//方法1
<router-link :to="`/home/message/detail/${m.id}/${m.title}`">跳转</router-link>
//方法2 推荐
<router-link :to="{
	name:'xiangxi',
	params:{id:m.id,title:m.title}
}">跳转</router-link>

使用：<span>{{$route.params.id}}<span>

3  优化参数使用

   上面接收到参数后使用起来需要写的比较长<span>{{$route.query.id}}<span>优化如下：路由配置中加入  props 有三种写法，推荐第三种

使用的时候在计算属性中prop:['id','title']去接收参数。   <a>{{id}}</a>

去掉浏览器前进后退