目录
一、什么是路由？
1.后端路由：对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源
2.前端路由：对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换，同时，hash有一个特点：HTTP请求中不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现；
3.在单页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由（区别于后端路由）
二、如何使用路由
（一）路由的基本使用
1.引入js文件，这个js需要放在vue的js后面，自动安装（提供了一个VueRouter的构造方法）
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- 引入js文件，这个js需要放在vue的js后面 --> <script src="https://unpkg.com/vue-router@3.0.0/dist/vue-router.js"></script>
2.创建路由new VueRouter(),接受的参数是一个对象
3.在实例化的对象里配置属性routes:[],这个数组里的对象包含path属性和component属性
4.path属性是url的地址,component属性就是显示的组件（传组件的对象）
//创建路由new VueRouter(),接受的参数是一个对象 const router = new VueRouter({ //在实例化的对象里配置属性routes:[],这个数组里的对象包含path属性和component属性 routes:[ { //path属性是url的地址 path:'/index', //component属性就是显示的组件名称 component: index },{ path:'/detail', component: detail, }, ], });
5.创建的路由需要和vue实例关联一下
在vue实例中与data、methods同级的位置加入一个属性router：‘路由的名字’
6.路由到的组件显示在哪个位置？在父组件中加入<router-view></router-view>
<div id='app'> <router-link to="/index">index </router-link> <router-link to="/detail">去详情 </router-link> <button @click="todetail"> q去详情页</button> <button @click="toMine"> 个人中心页</button> <!-- 路由到的组件显示在哪个位置<router-view></router-view> --> <router-view></router-view> </div>
（二）路由的跳转
1.router-link标签可以设置to属性
·默认是a标签，可以通过tag设置包裹标签
<div> <router-link to="/detail">去详情 </router-link> <!-- 通过query的方式在url后加?参数名=参数的值 获取参数：$route.query.参数名 --> <router-link to="/detail?id=104&name='zs'">去详情（参数拼接）</router-link> <!-- --> <router-link :to="{path:'/detail',query:{id:103,name:'zs'}}">去详情（query对象传参） </router-link> <!-- 使用浏览器参数的方式传递参数，这种方式必须加params对象 获取参数$route.params.参数名--> <router-link :to="{name:'my',params:{userid:234}}"> 去个人中心（params对象传参） </router-link> </div>
2.函数式跳转
methods: { // 函数式跳转 todetail(){ // this.$router.push('/detail') this.$router.push({path:'/detail'}) }, toMine(){ // this.$router.push({path:'/mine',query:{id:104,name:'lisi'}}) this.$router.push({ name:"my", params:{userid:999} }) } },
（三）路由重定向
redirect可以进行路由的重定向
routes:[ { //路由的重定向 redirect path:'/', redirect:'/index', }, { //path属性是url的地址 path:'/index', //component属性就是显示的组件名称 component: index },{ path:'/detail', component: detail, }, // 路径传参 { path:'/mine/:userid', component:mine, // params传参，设置name name:'my' } ],
（四）选中路由高亮
1.使用默认的样式
直接设置router-link-active
/* 1.使用默认的高亮样式 直接设置router-link-active */ .router-link-active{ font-size: 30px; color: hotpink; }
2.自定义样式
在路由实例中与routes同级配置 linkActiveClass:'自定义的类名'
//创建路由new VueRouter(),接受的参数是一个对象 const router = new VueRouter({ //在实例化的对象里配置属性routes:[],这个数组里的对象包含path属性和component属性 routes:[ { //路由的重定向 redirect path:'/', redirect:'/index', }, { //path属性是url的地址 path:'/index', //component属性就是显示的组件名称 component: index },{ path:'/detail', component: detail, }, // 路径传参 { path:'/mine/:userid', component:mine, // params传参，设置name name:'my' } ], // 自定义高亮，配置 linkActiveClass:'自定义的类名',此时原有的高亮失效 linkActiveClass:"myactive" });
（五）定义参数
1.通过query的方式在url后加?参数名=参数的值
<template id="index"> <div> <router-link to="/detail">去详情 </router-link> <!-- 通过query的方式在url后加?参数名=参数的值 获取参数：$route.query.参数名 --> <router-link to="/detail?id=104&name='zs'">去详情（参数拼接）</router-link> <!-- --> <router-link :to="{path:'/detail',query:{id:103,name:'zs'}}">去详情（query对象传参） </router-link> </div> </template>
获取参数：$route.query.参数名
let detail = { template: '#detail', created(){ console.log(this); // 获取参数：$route.query.参数名 console.log(this.$route.query.id); } }
2.使用浏览器参数的方式传递参数
<template id="index"> <div> <!-- 使用浏览器参数的方式传递参数，这种方式必须加params对象 获取参数$route.params.参数名--> <router-link :to="{name:'my',params:{userid:234}}"> 去个人中心（params对象传参） </router-link> </div> </template>
获取参数$route.params.参数名
let mine = { template: '#mine', created(){ console.log(this); // 2.获取参数$route.params.参数名 console.log(this.$route.params); } }
（六）组件的嵌套
1.声明路由的时候设置children,这是children是一个数组，数组里是路由对象
{ path:'/detail', component: detail, //声明路由的时候设置children,这是children是一个数组，数组里是路由对象 //这个children的组件就会渲染在它父组件的<router-view>中 children:[ { // 注意children中的子路由的对象中的path属性的内容不加/,如果加/ 会被解析为根路由 path:'play', component:play },{ path:"course", component:course } ] },注意children中的子路由的对象中的path属性的内容不加/ ， 如果加/ 会被解析为根路由
2.这个children的组件就会渲染在它父组件的<router-view>中
<template id="detail"> <div> 详情页 <router-link to="/detail/play"> play</router-link> <!-- //这个children的组件就会渲染在它父组件的<router-view>中 --> <router-view></router-view> </div> </template>
（七）命名视图
1.我们之前只能一个地址对应一个组件，现在可以一个地址对应多个组件
{ path:'/detail', // 使用compones可以定义多个组件 components: { // 通过default属性可以设置默认的组件，默认组件只有一个，不写名字也可以渲染 default:detail, play:play, course } }
2.components属性设置的
3.给router-view设置名字，这个名字和components组件名字是对应的
<div id='app'> 命名视图 1.我们之前只能一个地址对应一个组件，现在可以一个地址对应多个组件 2.components属性设置的 3.给router-view设置名字，这个名字和components组件名字是对应的 4.设置默认值default对应组件可以设置名字也可以访问 <!-- 预留展示区域 --> <router-view class="header"></router-view> <!-- 给router-view设置名字，这个名字和components组件名字是对应的 --> <router-view name="play" class="left" ></router-view> <router-view name="course" class="right"></router-view> </div>
4.设置默认值default对应组件可以设置名字也可以访问
三、计算属性和监听器
1.watch：监听data中属性的改变
const vm = new Vue({ el: '#app', data: { firstName:"", lastName:"", // name:"", }, // watch监听data中属性的改变 watch:{ firstName:function(value){ console.log(value); this.name = this.firstName + '-' +this.lastName }, lastName:function(value){ console.log(value); this.name = this.firstName + '-' +this.lastName }, }, })
2.computed：默认只有getter的计算属性，定义有getter和setter的计算属性
（1）getter：只要该表达式中含有的data中的数据发生改变时，该属性中的数据就会发生改变
（2）setter：只有当自身发生改变的时候才触发
const vm = new Vue({ el: '#app', data: { firstName:"", lastName:"", // name:"", }, // 属性计算 computed: { // 属性不能和data中重复 // name() { // return this.firstName + '-' +this.lastName; // }, name: { get:function(){ return this.firstName + '-' +this.lastName; }, // 只有当自身发生改变的时候才触发 set(value){ console.log(value); console.log(value.split('-')); if( value.split('-').length ==2){ this.firstName = value.split('-')[0] this.lastName = value.split('-')[1] } } }, }, })
附：method、computed和watch的区别
1.computed属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用,使用的时候不加（）；
2.methods方法表示一个具体的操作，主要书写业务逻辑；
3.watch一个对象，键是需要观察的表达式，值是对应回调函数。主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作；可以看作是computed和methods的结合体
952
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
