最近开始学习Vue,最大的感触就是对单页应用真的友好
ps:
单页应用:我自己的理解就是整个工程只有一个.html文件,其余的内容全部通过js来控制,对于vue来说,除了仅有的一个.html文件,其余的内容都是将组件嵌套进html文件中进行渲染。
对于单页应用,官方提供了vue-router
进行路由跳转的处理
一、安装路由
在终端通过命令安装router
npm install vue-router --save
二、使用路由
// 导入路由
import Router from 'vue-router'
// 注册路由
Vue.use(Router);
映射路由:
{
// path中只有一个'/'这种情况表示该组件是第一个被加载的
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/demo',
name: 'demo',
component: demo
}
path:配置了路由的路径 component:配置了映射的组件
三、使用 <router-link> 映射路由
<router-link to="/demo">
跳转
</router-link>
编译的时候,router-link会被渲染成a标签,被点击的时候url发生相应改变,相应的,页面也会被重新渲染
四、使用 <router-view> 显示内容
<router-view></router-view>
<router-view>定义显示部分,就是点击后,区配的内容显示在什么地方
还有。。。。。。。。
嵌套路由
{
path: '/demo',
name: 'demo',
component: demo,
//嵌套路由
children: [
//page1的加载方式为按需加载,这种方式使得项目在最初的时候代码量特别少
{path: '/page1', name: 'page1', component: resolve => require(['../components/page1.vue'], resolve)},
{path: '/demo/select', name: 'select', component: select}
]
}