|
目录
一、什么是路由？
二、如何使用路由
（一）路由的基本使用
（二）路由的跳转
（三）路由重定向
（四）选中路由高亮
（五）定义参数
（六）组件的嵌套
（七）命名视图
三、计算属性和监听器
?附：method、computed和watch的区别
一、什么是路由？
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的结合体
|