Vue初学34-vue-router的使用

vue-router简介

       vue-router是Vue.js的官方路由插件，它和vue.js是深度集成的，适合用于构建单页面应用（SPA）。

       vue-router是基于路由和组件的，路由用于设定访问路径，将路径和组件映射起来，在vue-router的单页面应用中，页面的路径改变就是组件的切换。

       切换组件的过程不会重新发送请求，只是在前端进行组件的切换。

vue-router基本使用

下面以cli2为例，演示下vue-router的基本使用

通过命令，新建名为vueroutertest的项目

vue init webpack vueroutertest   

 

Install vue-router 选择 yes 

创建完成后，结构如下

通过命令npm run dev 运行程序，默认效果如下

在页面中添加两个链接，通过vue-router，在前端实现组件的切换。

首先，在components目录下，新建两个组件home.vue和about.vue

router目录下index.js文件修改如下

import Vue from 'vue'
import Router from 'vue-router'

import home from '../components/home'
import about from '../components/about'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/home',
      name: 'home',
      component: home
    },
    {
      path: '/about',
      name: 'about',
      component: about
    }
  ]
})

 App.vue文件修改如下

 其中，标签用于指定切换后的组件的位置

运行效果如下

 vue-router默认是采用的hash模式，地址中有#，如果不想要#可以指定采用history模式,这样地址栏就不会有#符号

 

router-link的其他属性 

tag属性：默认会被渲染成标签，tag可以指定被渲染成什么标签，比如

replace属性：replace属性不会留下history记录，指定replace后，后退键不能返回上一个页面。

标签对应的路由匹配成功时，会自动给当前元素设置一个router-link-active的class,可以在该class中设置样式。

如果不用router-link可以通过代码也实现路由跳转