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

<template>
     <div>
       <h2>我是home标题</h2>
       <span>我是home页内容</span>
     </div>
</template>

<script>
export default {
  name: 'home',
};
</script>

<style scoped>
</style>

<template>
     <div>
       <h2>我是about标题</h2>
       <span>我是about页内容</span>
     </div>
</template>

<script>
export default {
  name: 'about',
};
</script>

<style scoped>
</style>

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文件修改如下

<template>
  <div id="app">
    <router-link to="/home">home</router-link>
    <router-link to="/about">about</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>

</style>

 其中，<router-view>标签用于指定切换后的组件的位置

运行效果如下

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

 

router-link的其他属性 

tag属性：<router-link>默认会被渲染成<a>标签，tag可以指定<router-link>被渲染成什么标签，比如<button>

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

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

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