Vue全流程--Vue2路由

引入路由的原因：

实现单页面应用（SPA）

什么是单页面应用：

1、点击跳转链接后直接在原本的页面展示。路径发生相应改变

2、整个应用只有一个完整页面

3、数据需要通过ajax获取

Vue2中的路由是什么：

Vue2路由是一个插件库叫做vue-router

需要引入

npm i vue-router

应用方式

//插件引入
import VueRouter from 'vue-router'
//插件使用
Vue.use(VueRouter)

配置项

我们已经知道一些配置项，比如data、methods、watch、computed、props、store等等

路由也有其对应的配置项。router

实际应用：

一般我们会在src文件夹中创建router文件夹，在文件夹中创建index.js

index.js内容如下：

第一步肯定是先引入一个库

import VueRouter from 'vue-router'

第二步就是利用VueRouter这个构造函数创建实例

const router = new VueRouter
({})

第三步填写路径，以及每个路径所使用的组件

const router = new VueRouter
({routes:
[
{path:'about'component:About
},
{path:'home'component:Home
}
]
})

创建了一个列表，然后列表里面存储的每个对象都是一组路由（路径+组件）

第四步引入相关组件

import About from '组件路径'   //请按照具体项目进行修改
import Home from '组件路径'   //请按照具体项目进行修改

第五步暴露该路由器

export default Router

第六步引入我们暴露出来的router在APP.vue中

import router from '../router'  //从路由文件夹中引入路由

第七步写入配置项

new Vue({.....
router:router})

第八步指定跳转路径 router-link to

<router-link to="/about">About</router-link>

第九步指定展示位置

<router-view></router-view>

组件分类

一般组件：直接写在".vue"组件中的比如

<start></start>

路由组件:使用<router-view></router-view>指定展示地区的。或者是写在路由中的组件

所以一般我们将路由组件放到pages文件夹中

将一般组件放到components文件夹中

组件切换：

组件切换Vue默认被切换的组件被销毁

多级路由：（嵌套路由）

在配置router文件夹的index.js文件时利用一个配置项children

const router = new VueRouter
({routes:
[{
path:'/about',
component:About
},
{path:'/home',component:Homechildren:
[{path:'message',component:Message},{{path:'news',component:News
}]
}]
})

当然相对应的router-link也要发生改变(要写完整路径)

<router-link to="/home/news">dnajksaj</router-link>

路由参数一：

类似于组件传参（在每个模板后面写入参数），路由也可以传参（在每个router-link后面写入参数）。并且路由传递参数时，使用的是query这么一个参数

这是传参

<template><div><ul><li v-for="m in messageList" :key="m.id"><!-- 跳转路由并携带query参数，to的字符串写法 --><!-- <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{{m.title}}</router-link>&nbsp;&nbsp; --><!-- 跳转路由并携带query参数，to的对象写法 --><router-link :to="{path:'/home/message/detail',query:{id:m.id,title:m.title}}">{{m.title}}</router-link></li></ul><hr><router-view></router-view></div>
</template><script>export default {name:'Message',data() {return {messageList:[{id:'001',title:'消息001'},{id:'002',title:'消息002'},{id:'003',title:'消息003'}]}},}
</script>

这是接收使用参数

<template><ul><li>消息编号：{{$route.query.id}}</li><li>消息标题：{{$route.query.title}}</li></ul>
</template><script>export default {name:'Detail',mounted() {console.log(this.$route)},}
</script>

命名路由：

可以简化路由的跳转。其实我们可以发现在上面的代码中路径已经比较长了

/home/message/detail

我们使用一个name属性即可重命名

我们先加入一个name属性值

routes:[{name:'guanyu',path:'/about',component:About}]

有了name后就可以直接调用

 <!--简化后，直接通过名字跳转 --><router-link :to="{name:'hello'}">跳转</router-link>

路由参数二：

其实，通过路由传递参数还可以通过params。

传递参数

params传递参数首先需要在index.js文件中的path中给出占位符

例如

path:'detail/:id'

“：id”就是占位符

再在父级组件写入跳转的路径，以及要传递的参数

<!-- 跳转路由并携带params参数，to的对象写法 -->
<router-link :to="{name:'xiangqing',params:{id:m.id,title:m.title}}">{{m.title}}</router-link>

路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置！

接收参数

子组件接收并使用

{{$route.params.id}}

路由参数三：

通过props我们传递参数更加方便。

说实话我们并不需要将上述的路由参数全部都熟练学会，只是在我们学习他人思路的时候能流畅的看懂他人的代码。在日常的项目中我们只需要熟练使用某一种即可。毕竟我认为编程重要的的是一种思路。至于语法问题。多花点时间总会熟悉

我们只需要在router文件夹中index.js文件中要往哪个组件传递参数，就在哪个路由里写props

                    path:'message',component:Message,children:[{name:'xiangqing',path:'detail',component:Detail,props($route){return {id:$route.query.id,title:$route.query.title,}

接着在相应的名为detail组件接收即可