<!DOCTYPE html>
<html>
<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="./js/vue.js"></script>
<!-- 1 引入js文件，这个js需要放在vue的js后面，自动安装（提供了一个VueRouter的构造方法） -->
<script src="./js/vue-router.js"></script>
<style>
.act {
background-color: #aff;
font-size: 40px;
}
</style>
</head>
<!--
1 引入js文件，这个js需要放在vue的js后面，自动安装（提供了一个VueRouter的构造方法）
2 创建路由new VueRouter(),接受的参数是一个对象
3 在实例化的对象里配置属性routes:[],这个数组里的对象包含path属性和component属性
4 path属性是url的地址,component属性就是显示的组件（传组件的对象）
5 创建的路由需要和vue实例关联一下
6 路由到的组件显示在哪个位置<router-view></router-view>
-->
<body>
<div id='app'>
<!-- 5、预留展示位置 -->
<router-view></router-view>
<!-- 命名视图---预留空间-->
<router-view name="detail"></router-view>
<router-view name="mine"></router-view>
</div>
<template id="index">
<div>
首页
<!-- router-link标签可以设置to属性 -->
<router-link to='/detail'>去详情页</router-link>
<!-- 声明式的路由跳转 -->
<!-- 路由的跳转和传参 /detail?courseid=123 会显示传参的属性名:属性值 不够安全 -->
<router-link :to="{path:'/detail',query:{courseid:123}}">去详情页--传参</router-link>
<!-- 这个必须传参 -->
<!--路由的跳转和传参 name是固定的 /mine/345 只显示属性值 更安全-->
<router-link :to="{name:'my',params:{ids:345}}">去geren中心</router-link>
<!-- 函数式的路由跳转 -->
<button @click="toDetail">todetail</button>
<button @click="tomy">tomy</button>
</div>
</template>
<!--
路由嵌套 给detail 嵌套 play和play1
1. 声明路由的时候设置children,这是children是一个数组，数组里是路由对象
2. 这个children的组件就会渲染在它父组件的<router-view>中
-->
<!-- 这里给 详情页设置路由嵌套 -->
<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="play1">
<div>play1</div>
</template>
<script>
let play = {
template: '#play'
}
let play1 = {
template: '#play1'
}
let index = {
template: '#index',
methods: {
toDetail() {
console.log('toDetail');
this.$router.push({
path: '/detail',
query: {
name: 'sz',
id: 123
}
})
},
tomy() {
this.$router.push({
name: 'my',
params: {
// 传参也需要 3、创建映射关系中---路径后 加/:参数名
ids: 11111123
}
})
},
}
}
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: [
//路由的重定向----打开页面会自动在url后加 /index
{
path: '/',
redirect: '/index'
},
//每个路由(页面)
{
//路径
path: '/index',
//组件
component: index,
// 命名视图
components: {
default: index,
detail,
mine
}
},
//每个路由(页面)
{
//路径
path: '/detail',
//组件
component: detail,
//路由嵌套
children:[
{
//path中 不加 /
path:'play',
component:play
},
{
path:'play1',
component:play1
},
]
},
//每个路由(页面)
{
//路径----要传参的话 路径后 加/:参数名
path: '/mine/:ids',
//组件
component: mine,
name: 'my'
}
],
// 路由高亮 自定义类名-------- 配置 linkActiveClass: '自定义的类名'
linkActiveClass: 'act'
})
const vm = new Vue({
// 5、将路由实例挂载到vue实例上
// router:router,
router,
el: '#app',
data: {
},
methods: {
}
})
</script>
</body>
</html>
Grundlegende Verwendung von Routing
Ich denke du magst
Origin blog.csdn.net/m0_53579196/article/details/130713852
Empfohlen
Rangfolge