路由
有关路由的详细信息可以去vue的官网去查看,我这里只是自己实例的一个理解和总结。
单页面程序离不开路由的分配,自始至终只有一个页面存活,因此有关路由跳转的逻辑要合理配置
vue-Router
选择官方使用的vue-router库,因此要先准备环境
- 安装
$ npm install vue-router
安装之后就要配置路由,但是为了方便维护路由节点,可以创建单独的文件存放路由配置,因此创建router文件夹,添加index.js
- index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
export default new VueRouter({
routes: []
})
然后在根入口文件中导入router,并配置到vue实例中。
- main.js
import router from './router'
new Vue({
el: '#app',
components: {
App},
template: '<App/>',
router
})
这样就能在各个模块中使用路由了。
实例
在src目录下创建views目录,分别创建about、home、news、message、detail的vue页面。
- 路由映射文件——index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import About from '../views/About.vue'
import Home from '../views/Home.vue'
import News from '../views/News.vue'
import Message from '../views/Message'
import Detail from '../views/detail.vue'
Vue.use(VueRouter)
export default new VueRouter({
routes: [
{
path: '/', redirect: '/about'},
{
path: '/about', component: About},
{
path: '/home',
component: Home,
children: [
{
path: 'news', component: News},
{
path: 'message'