您现在的位置是:首页 >学无止境 >vue中的路由使用网站首页学无止境
vue中的路由使用
简介vue中的路由使用
什么是路由
后端路由
后端路由:对于普通的网站,所有的超链接都是URL地址,所有的URL地址都对应服务器上对应的资源。
前端路由
前端路由:对于单页面应用程序来说,这主要通过URL中的hash(#号)来实现不同页面之间的切换,同时,hash有一个特点:HTTP请求中不会包含hash相关的内容,所有,单页面程序中的页面跳转主要用hash实现。
路由的基本使用
1、引入js文件,这个js需要放在vue.js的后面,自动安装(提供了一个VueRouter的构造方法);
2、创建路由new VueRouter(),接受的参数是一个对象;
3、在实例化的对象里配置属性routes:[],这个数组里的对象包含path属性和component属性,path属性的url地址,component属性就是显示的组件(传组件的对象);
4、创建的路由需要和vue实例关联在一起;
5、路由到的组件显示在哪个位置
//引入vue.js
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 1、引入js文件,这个js需要放在vue.js的后面,自动安装(提供了一个VueRouter的构造方法) -->
<script src="https://unpkg.com/vue-router@3.0.0/dist/vue-router.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
//html代码:
<div id='app'>
<!-- 5、预留展示区域 -->
<router-view></router-view>
</div>
//路由实例代码:
const router = new VueRouter({
// 3、创建映射关系
routes: [
{
path: ',
component:
}
]
})
//vue实例代码:
const vm = new Vue({
// 4、将路由实例挂载到vue实例上
router: router,
el: '#app',
data: {
},
methods: {
}
})
路由的跳转和传参
路由的跳转和传参有两种方式:一种是声明式跳转和传参;一种是函数式路由跳转和传参。
路由的跳转
路由的跳转用标签中的to属性设置
<router-link to="/detail">去详情页</router-link>
声明式路由跳转和传参
声明式路由跳转和传参是有两种办法:一种是path搭配query使用,一种是name搭配params使用
path搭配query使用
<router-link :to="{path:'/detail',query:{courseid:123} }">去详情1</router-link>
name搭配params使用
使用name搭配params使用的时候要给需要跳转的路由对象上加name。
<router-link :to="{name:'my',params:{id:234} }">去个人中心</router-link>
函数式路由跳转和传参
<template id="index">
<div>
<button @click="toDetail">toDetail</button>
<button @click="toMine">toMine</button>
</div>
</template>
let index = {
template: '#index',
methods: {
toDetail() {
console.log(1);
this.$router.push({
path: '/detail',
query: {
id: 23414
}
})
},
toMine() {
this.$router.push({
name: 'my',
params: {
id: 45634
}
})
}
}
}
路由的嵌套
1、声明路由的时候设置children,这里children是一个数组,数组里是路由对象;
2、这个children的组件就会渲染在它的父组件的中
<template id="detail">
<div>
详情页
<router-view></router-view>
</div>
</template>
<template id="play">
<div>
play
</div>
</template>
<template id="study">
<div>
study
</div>
</template>
const router = new VueRouter({
// 3、创建映射关系
routes: [
{
path: '/detail',
component: detail, children: [
{
path: 'play',
component: play
},
{
path: 'study',
component: study
}
]
}
]
})
命名视图
1、之前只能一个地址对应一个组件,现在可以一个地址对应多个组件;
2、用components属性设置;
3、给router-view设置名字,这个名字和components组件名字是对应的;
4、设置默认值default对应组件可以设置名字也可以访问。
const router = new VueRouter({
// 3、创建映射关系
routes: [
{
path: '/index',
// component: index
// 命名视图
components: {
default: index,
detail,
mine
}
}
]
})
风语者!平时喜欢研究各种技术,目前在从事后端开发工作,热爱生活、热爱工作。