【Vue】路由
文章目录
- 一、路由的概念
-
- 1.后端路由
- 2.前端路由
- 3.单页面应有程序
- 二、路由的实例化
-
- 1.路由实例化步骤
- 2.声明式的路由跳转
- 3.函数式路由跳转传参
- 4.路由的重定向 redirect
- 5.路由高亮
- 6.组件的嵌套
- 7.命名视图 components: { }
- 8.代码
一、路由的概念
1.后端路由
对于普通的网站，所有超链接都是URL地址，所有URL地址都对应服务器上对应的资源
2.前端路由
对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换
3.单页面应有程序
在单页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由（区别于后端路由）
二、路由的实例化
1.路由实例化步骤
1.引入js文件
2.创建路由new VueRouter(),接受的参数是一个对象
const router = new VueRouter({})
3.创建映射关系
routes : [{
path : URL地址,
component : 组件
}]
4.将路由实例挂载到Vue实例上
5.预留展示区域
2.声明式的路由跳转
router-link 标签可以设置to属性：
传参：
path – query
name – params 必须传参，更安全
3.函数式路由跳转传参
4.路由的重定向 redirect
redirect可以进行路由的重定向
5.路由高亮
直接设置：router-link-active
自定义类名：配置 linkActiveClass :‘自定义类名’
6.组件的嵌套
1.声明路由的时候设置children，children是一个数组，数组里是路由对象
2.children的组件渲染到父组件的上
7.命名视图 components: { }
设置components属性，给router-view设置名字，这个名字与components组件名字对应
8.代码
<head>
<style>
/* 路由高亮 */
.router-link-active {
font-size: 40px;
font-weight: 600;
color: aqua;
}
/* 自定义类名 */
.font {
font-size: 40px;
font-weight: 600;
color: aqua;
}
</style>
</head>
<body>
<div id='app'>
<!--
1.引入js文件
2.创建路由new VueRouter(),接受的参数是一个对象
const router = new VueRouter({})
3.创建映射关系
routes : [{
path : URL地址,
component : 组件
}]
4.将路由实例挂载到Vue实例上
5.预留展示区域
<router-view></router-view>
-->
<router-view></router-view>
</div>
<template id="index">
<div>
首页
<router-link to="/detail">去详情</router-link>
<!-- 声明式路由跳转 -->
<router-link :to="{path:'/detail',query:{courseId:121} }">去详情页</router-link>
<!-- 更安全 -->
<router-link :to="{name:'me',params:{ids:123} }">去个人中心</router-link>
<!-- 函数式路由跳转 -->
<button @click="toDetail">toDetail</button>
<button @click="toMine">toMine</button>
</div>
</template>
<template id="detail">
<div>
详情页
<router-view></router-view>
</div>
</template>
<template id="mine">
<div>
个人中心
</div>
</template>
<template id="course">
<div>
course
</div>
</template>
<template id="study">
<div>
study
</div>
</template>
<script>
let index = {
template: '#index',
methods: {
toDetail() {
this.$router.push({
path: '/detail',
query: {
id: 134
}
})
},
toMine() {
this.$router.push({
name: 'me',
params: {
ids: 8080
}
})
}
}
}
let detail = {
template: '#detail',
created() {
console.log(this);
console.log(this.$route.query);
console.log(this.$route.query.courseId);
}
}
let mine = {
template: '#mine',
created() {
console.log(this);
console.log(this.$route.params.ids);
}
}
// 创建路由实例
const router = new VueRouter({
// 创建映射关系
routes: [{
// 路由的重定向
path: '/',
redirect: '/index'
},
{
path: '/index',
// 命名视图
components: {
default: index,
detail,
mine
}
},
{
path: '/detail',
component: detail,
/*
路由嵌套:
1.声明路由的时候设置children，children是一个数组，数组里是路由对象
2.children的组件渲染到父组件的