路由
- 概念: 一组key-value对应关系
key1 + value1 => 路由route
key2 + value2 => 路由route
......
- 上述路由的集合,就是'路由器'(router)
- key为路径,value对应 组件或者 回调func
-
插件: vue-router,作路由跳转(专门实现SPA应用)
-
SPA应用
- 单页web应用(single page web application,SPA)
- 整个应用只有一个完整的页面
- 点击页面中的导航链接不会刷新页面,只会作页面的局部更新
- 数据需要通过ajax请求获取
- vue-router安装/引入
npm i vue-router@3 // 安装和vue2版本相匹配的router版本
### main.js
......
import VueRouter from 'vue-router' // 引入
Vue.use(VueRouter) // 使用
new Vue({
render: h => h(App),
}).$mount('#app')
- demo演示:路由实现两个页面的切换,但是页面不刷新,只更新页面部分内容
### About组件
<template>
<div>
<h1>我是About组件的内容</h1>
</div>
</template>
<script>
export default {
name:'About'
}
</script>
### Home组件
<template>
<div>
<h1>我是Home组件的内容</h1>
</div>
</template>
<script>
export default {
name:'Home'
}
</script>
### router(src目录底下新建该目录)
### router/index.js
import VueRouter from 'vue-router' // 引入router对象
import About from '../components/Router/About.vue' // 引入两个组件
import Home from '../components/Router/Home.vue'
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' // 导入router对象
Vue.use(VueRouter)
new Vue({
render: h => h(App),
router:router // 配置
}).$mount('#app')
### app.vue(使用bootstrap框架)
<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">
<!-- 原始html中我们使用a标签实现页面的跳转,页面会跳动 -->
<!-- <a class="list-group-item active" href="./about.html">About</a> -->
<!-- <a class="list-group-item" href="./home.html">Home</a> -->
<!-- Vue中借助router-link标签实现路由的切换(本质的渲染还是变回<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>
- 小结:
- 使用<router-link>来指定path
- 单单指定 <router-link> 只实现了url路径跳转,组件内容并不会被呈现出来
- 使用<router-view>来指定组件呈现的位置
1.小结
-
安装vue-router,命令:
npm i vue-router
-
应用插件:
Vue.use(VueRouter)
-
编写router配置项:
//引入VueRouter import VueRouter from 'vue-router' //引入Luyou 组件 import About from '../components/About' import Home from '../components/Home' //创建router实例对象,去管理一组一组的路由规则 const router = new VueRouter({ routes:[ { path:'/about', component:About }, { path:'/home', component:Home } ] }) //暴露router export default router
-
实现切换(active-class可配置高亮样式)
<router-link active-class="active" to="/about">About</router-link>
-
指定展示位置
<router-view></router-view>