VueRouter路由的基本使用
步骤
- 准备组件
.
<template>
<h2>about</h2>
</template>![请添加图片描述](https://img-blog.csdnimg.cn/f0f65fb6e22046a397fa538ee311a679.png)
<script>
export default {
name: 'About'
}
</script>
<style>
</style>
<template>
<h2>home</h2>
</template>
<script>
export default {
name: 'Home'
}
</script>
<style>
</style>
- 导入vue-router
现在vue-router默认的版本为4,只能在vue3中使用。若想在vue2中使用,需要指定vue-router的版本为@3
打开终端,安装
npm i vue-router@3
vue-router相当于一个插件,要引用。 打开main.js
import Vue from 'vue'
import App from './App.vue'
// 引入VueRouter
import VueRouter from 'vue-router'
// 引入路由器
import router from './router'
Vue.config.productionTip = false
// 应用插件
Vue.use(VueRouter)
new Vue({
render: h => h(App),
router
}).$mount('#app')
- 定义路由规则创建路由对象
// 该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
// 引入组件
import About from '../components/About'
import Home from '../components/Home'
// 创建并暴露一个路由器
export default new VueRouter({
routes: [
{
path:'/about',
component:About
},
{
path:'/home',
component:Home
},
]
})
- router-link
<router-link class="list-group-item" active-class="active" to="/about">About</router-link>
<router-link class="list-group-item" active-class="active" to="/home">Home</router-link>
- router-view显示页面
<!-- 指定组件呈现位置 -->
<router-view></router-view>
完整效果
代码(全)
App.vue
<template>
<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="/about">About</router-link>
<router-link class="list-group-item" active-class="active" to="/home">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>
</template>
<script>
export default {
name: 'App',
}
</script>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'App',
}
</script>