【vue中路由的使用】
【vue中路由的使用】
-
-
-
- 什么是路由
-
- 后端路由：
- 前端路由：
- 路由的基本使用
- 路由的跳转
- 组件的嵌套
- 路由重定向
- 选中路由高亮
- 代码解析
-
-
什么是路由
后端路由：
对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源
前端路由：
对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换，同时，hash有一个特点：HTTP请求中不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现；
在单页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由（区别于后端路由）
路由的基本使用
● 引入js文件，这个js需要放在vue的js后面，自动安装（提供了一个VueRouter的构造方法）
● 创建路由new VueRouter(),接受的参数是一个对象
● 在实例化的对象里配置属性routes:[],这个数组里的对象包含path属性和component属性
● path属性是url的地址,component属性就是显示的组件（传组件的对象）
● 创建的路由需要和vue实例关联一下
● 路由到的组件显示在哪个位置
路由的跳转
● router-link标签可以设置to属性
● 默认是a标签，可以通过tag设置包裹标签
使用浏览器参数的方式传递参数
● 设置路由的时候/路由地址/:参数名
● 获取参数$route.params.参数名
组件的嵌套
● 声明路由的时候设置children,这是children是一个数组，数组里是路由对象
● 这个children的组件就会渲染在它父组件的中
路由重定向
redirect可以进行路由的重定向
选中路由高亮
使用默认的样式
直接设置 router-link-active
自定义样式
配置 linkActiveClass:‘自定义的类名’
代码解析
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script src="https://unpkg.com/[email protected]/dist/vue-router.js">script>
<script src="https://unpkg.com/axios/dist/axios.min.js">script>
<style>
/* 路由高亮 */
.router-link-active {
font-size: 40px;
color: pink;
}
.active {
font-size: 40px;
color: pink;
}
style>
head>
<body>
<div id='app'>
<router-view>router-view>
<router-view name="detail">router-view>
<router-view name="mine">router-view>
<router-link :to="{path:'/detail', query:{courseid:123,id:456} }">去详情1router-link>
<router-link :to="{name:'my',params:{ids:789} }">去个人中心router-link>
div>
<template id="index">
<div>
首页
<a href="#/detail?coreseId=123">去详情aa>
<router-link to="/detail">去详情router-link>
<router-link :to="{path:'/detail', query:{courseid:123,id:456} }">去详情1router-link>
<router-link :to="{name:'my',params:{ids:789} }">去个人中心router-link>
<button @click="toDetail">toDetailbutton>
<button @click="toMine">toMinebutton>
div>
template>
<template id="detail">
<div>
详情页
<router-view>router-view>
div>
template>
<template id="mine">
<div>
个人中心
div>
template>
<template id="play">
<div>
play
div>
template>
<template id="study">
<div>
study
div>
template>
<script>
let play = {
template: '#play'
}
let study = {
template: '#study'
}
let index = {
template: '#index',
methods: {
toDetail() {
console.log(1);
// this.$router.push('/detail')
this.$router.push({
path: '/detail',
query: {
id: 12312
}
})
},
toMine() {
this.$router.push({
name: 'my',
params: {
ids: 8908
}
})
}
}
}
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);
}
}
// 2、创建路由实例
const router = new VueRouter({
// 3、创建映射关系
routes: [
// 路由的重定向
{
path: '/',
redirect: '/index'
},
{
path: '/index',
// component: index
// 命名视图
components: {
default: index,
detail,
mine
}
},
{
path: '/detail',
component: detail,
// 路由嵌套
children: [
// path路径后不能加 /
{
path: 'play',
component: play
},
{
path: 'study',
component: study
}
]
},
{
path: '/mine/:ids',
name: 'my',
component: mine
}
],
// 配置 linkActiveClass: '自定义的类名'
linkActiveClass: 'active'
})
const vm = new Vue({
// 4、将路由实例挂载到vue实例上
// router: router,
router,
el: '#app',
data: {
},
methods: {
}
})
script>
body>