Front end consolidation 9-vue route jump

cc. ChenLy 2022-06-23 15:54:37 阅读数:298

endconsolidation9-vuevueroute

One 、 Case a -vue-router Level 1 jump

 Insert picture description here

 Insert picture description here
1、 To configure
(1) Create two new components
 Insert picture description here
(2) Configure the routing
 Insert picture description here
(3) Configure mount
 Insert picture description here
2、 Use
 Insert picture description here
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>

analysis :
use router-link Control route jump ,router-view Exhibition
 Insert picture description here

Be careful :vue2 Downloaded npm i [email protected]

Two 、 Multi level routing value transfer

 Insert picture description here
The first one is :
 Insert picture description here
 Insert picture description here
The second kind
 Insert picture description here
The third kind of
 Insert picture description here
 Insert picture description here
 Insert picture description here

版权声明:本文为[cc. ChenLy]所创,转载请带上原文链接,感谢。 https://qdmana.com/2022/174/202206231522362534.html