基本例子
先看例子吧。项目目录如下,
- 组件Home.vue
<template>
<h2>我是Home的内容</h2>
</template>
<script>
export default {
name:'Home'
}
</script>
<style>
</style>
- 组件About.vue
<template>
<h2>我是About的内容</h2>
</template>
<script>
export default {
name:'About'
}
</script>
<style>
</style>
- 组件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">
<router-link to="/about" active-class="active" class="list-group-item">About</router-link>
<router-link to="/home" active-class="active" class="list-group-item">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>
- router/index.js
import VueRouter from "vue-router";
import Home from "../components/Home";
import About from "../components/About";
export default new VueRouter({
routes:[
{
path:"/about",
component:About
},
{
path:"/home",
component:Home
}
]
})
- 入口文件main.js
import Vue from 'vue'
import App from './App.vue'
import VueRouter from "vue-router";
import router from "./router/index";
Vue.config.productionTip = false;
Vue.use(VueRouter);
new Vue({
render: h => h(App),
router:router
}).$mount('#app')
另,在public目录下新建了子目录css,并在css目录下放置了bootstrap.css,在index.html中通过以下方式引入了bootstrap. css。
<link rel="stylesheet" href="<%= BASE_URL %>css/bootstrap.css">
启动应用,测试效果。
小结
如何使用vue-router
- 安装vue-router:
npm install --save vue-router@3
,本例使用的是vue2,故安装了vue-router的3版本。 - 引入vue-router(vue-router本质是vue插件)、注册路由。
import Vue from "vue";vue-router
import VueRouter from "vue-router"; //引入vue-router
Vue.use(VueRouter); //应用vue-router
new Vue({
render: h => h(App),
router:router //注册路由器
}).$mount('#app')
- 创建路由器(创建router实例,用来管理路由规则)。
import VueRouter from "vue-router";
import Home from "../components/Home";
import About from "../components/About";
export default new VueRouter({
routes:[
{
path:"/about",
component:About
},
{
path:"/home",
component:Home
}
]
})
- routerLink标签实现切换,其中active-class属性设置高亮样式。
<router-link to="/about" active-class="active" class="list-group-item">About</router-link>
<router-link to="/home" active-class="active" class="list-group-item">Home</router-link>
- routerView,指定展示位置。
<router-view></router-view>
注意点
- 通常,路由组件存放在pages文件夹下,一般组件存放在components文件夹下。
- 切换时,隐藏组件,实质是销毁组件;切换时,显示组件,实质是挂载组件。
- 每个路由组件都有一个
$route
属性,记录着本组件的路由信息。 - 整个应用只有一个router,每个路由组件都有一个
$router
属性,通过该属性可以访问router。