Vue-router的使用

最近开始学习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}
]
}

猜你喜欢