前端巩固9-vue路由跳转

cc.ChenLy 2022-06-23 15:23:24 阅读数:76

前端vue路由巩固9-vue

一、案例一-vue-router一级跳转

在这里插入图片描述

在这里插入图片描述
1、配置
(1)新建两个组件
在这里插入图片描述
(2)配置路由
在这里插入图片描述
(3)配置挂载
在这里插入图片描述
2、使用
在这里插入图片描述
App.vue

<template>
<div id="app">
<div>
<div class="row">
<div class="col-xs-offset-2 col-xs-8">
<div class="page-header"><h2>Vue Router Demo</h2></div>
</div>
</div>
<div class="row">
<div class="col-xs-2 col-xs-offset-2">
<div class="list-group">
<!-- <a class="list-group-item active" href="./about.html">About</a>
<a class="list-group-item" href="./home.html">Home</a> -->
<router-link class="list-group-item" active-class="active" to="/myAbount">About</router-link>
<router-link class="list-group-item" active-class="active" to="/MyHome">Home</router-link>
</div>
</div>
<div class="col-xs-6">
<div class="panel">
<div class="panel-body">
<router-view></router-view>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import MyAbountVue from "./components/MyAbount.vue";
import MyHomeVue from "./components/MyHome.vue";
export default {

name: "App",
components: {

MyAbountVue,
MyHomeVue,
},
data() {

return {
};
},
methods: {
},
};
</script>
<style>
</style>

解析:
用router-link控制路由跳转,router-view展示
在这里插入图片描述

注意:vue2下载得是npm i [email protected]

二、多级路由传值

在这里插入图片描述
第一种:
在这里插入图片描述
在这里插入图片描述
第二种
在这里插入图片描述
第三种
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

版权声明:本文为[cc.ChenLy]所创,转载请带上原文链接,感谢。 https://blog.csdn.net/weixin_46589442/article/details/125424298