【精讲】vue2框架 路由的使用及案例精讲

目录

简介

第一部分：路由的使用

第二部分：案例精讲

 第三部分：知识点拓展

---

简介

首先讲述一下，路由的用法。抛出两个问题：1，什么是路由器，路由器的构成是什么？2，路由与路由器从形态上分析有什么区别？下面就让我们紧随这两个问题展开分析：

1，什么是路由，路由器的构成原理是什么？

当今时代，互联网普及，几乎每家都有宽带，有宽带就会用到路由器，那么路由器可以供用户使用分为两种形式，一种是无限网，一种是有线（连接端口的）。就有线联网而言，现在也不足以稀奇，首先让你的电脑通过网线一段的水晶头链接到另一端的路由器插孔中，这个插孔我们将它分成两部分，第一部分是光猫与路由器之间的传输交互，第二部分是路由器自身的操作，与用户使用之间的操作。

路由器插孔称为：router，而路由插孔则简称route，言外之意，路由是单一性的，而路由器是多像型。

2，路由与路由器从形态上分析有什么区别？

在上面的讲解分析中，其实已经提到过，路由是多个单页面构成，路由器仅是对网络起到了多向型作用，通过路由器引出路由的概率，但并非是路由   !==  路由器 。

通过上面的讲解与分析，下面进入路由时代，通过讲解案例来分析具体的路由：

第一部分：路由的使用

router中的index.js内容部分：

 下面均是子组件部分：

 

 

App父组件部分： 

 第二部分：案例精讲

router中的index.js内容部分：

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import AbouT from '../pages/AbouT'
import LuYou from '../pages/LuYou'
import JianJie from '../pages/JianJie'
import ShuJu from '../pages/ShuJu'
const routes = [
    {
        path:'/about',
        component:AbouT,
        children:[
            {   
                path:'jianjie',
                component:JianJie,
                children:[
                    {   
                        name:'renyuan',
                        path:'shuju',
                        component:ShuJu,
                    }
                ]
            }
        ]
    },
    {
          path: '/',
          redirect: '/about'
    },
    {
        path:'/luyou',
        component:LuYou
    }
]

const router = new VueRouter({
    routes,
})

export default router

子组件内容1：

子组件内容2：

子组件内容3：

 

子组件内容4：

main.js入口组件部分：

 在这里关于vue-router,router及router

第三部分:知识点拓展

3，使用路由

该标签是一个vue-router中已经内置的组件，他会被渲染成一个标签。

<router-link to="/about" active-class="hover">关于我们

该标签会根据当前的路径，动态渲染出不同的组件。

router-link属性：

to：用于指定跳转的路径。

tag：tag可以指定之后渲染成什么组件。

replace：replace不会留下history记录，所以指定replace的情况下，后退键返回不能返回到上一个页面中。

active-class：当对应的路由匹配成功时，会自动给当前元素设置一个router-link-active的class，设置active-class可以修改默认的名称。

4：mode属性

hash模式：vue的路由默认是hash模式，地址栏后面会带一个#号。

history模式：mode=”history”

区别：

1：hash，兼容性好，history旧版本浏览器不兼容

2：hash带的#不会发送给服务器，history会发送给服务器，程序部署上线时需要后端人员支持，解决404刷新问题。配置一下apache或是nginx的url重定向，重定向到你的首页路由上。

5：默认路径

{

  path: '/',

  redirect: '/about'

},

1. 1. params的类型

配置路由格式：/router/:id（动态路由）

代码：

{{item.realname}}

路由声明：

第一种：props:{id:10,title:'ttt'}

第二种：props:true  该路由的params的参数，传传递到该组件的props身上

第三种 值为函数(下方query参数在演示)

props($route){

  return {id:$route.query.id,title:$route.query.title}

}

1. 1. Query参数的类型

字符串形式：

{{item.title}}

参数接收：

$route.query.id

$route.query.title

1. 1. 路由name

简化路由的跳转   路由较长的使用名称

上述query跳转 推荐如下写法：

{{item.realname}}

当不是a标签时候，需要js代码进行跳转，我们就采用编程式路由。两种方式：replace和push。

1：字符串形式

this.$router.push(`/message/show/${item.id}/${item.realname}`);

2：对象形式

this.$router.push({

name:'show',

params:{

id:item.id,

title:item.title

}

})

3：this.$router.back();//后退

this.$router.forward();

this.$router.go();

知识点补充：

keep-alive是数据被切换之后了也不会丢失，内部填写存放的位置，include指的是你要保存哪个组件（内填组件名），切记，这个要放置在父组件的身上，父组件可控多个子组件，并且在父组件中通过include选择保存谁。keep-alive：含义：保持活跃。

若是多个组件在切换时都要保存数据，那么就需要这样去写:例：

:include="['News','Werk']"