一、案例一-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 vue-router@3
二、多级路由传值
第一种:
第二种
第三种