Vue Router简单实践

Vue Router(路由)

vue-router和vue.js是深度集成的,适合用于单页面应用.传统的路由是用一些超链接来实现页面切换和跳转.而vue-router在单页面应用中,则是组件之间的切换.其本质就是:建立并管理url和对应组件之间的映射关系.

1.0 vue 路由是什么

Vue路由是指根据url分配到对应的处理程序；作用就是解析URL，调用对应的控制器（的方法，并传递参数）。
Vue路由有助于在浏览器的URL或历史记录与Vue组件之间建立链接，从而允许某些路径渲染与之关联的任何一个视图。

2.0 为什么要使用路由

在传统的web开发中每一个请求地址都会请求服务器来进行处理，但是用户有些操作则无需请求服务器，
直接页面端修改下逻辑就能达到目的，在这种方式下最好的方法是使用路由，因为使用路由时，URL会随着改变，
用户浏览一个网页时可以直接复制或收藏当前页面的URL给别人，这种方式对于搜索引擎和用户来说都是友好的

3.0 入门

我们在创建vue项目的时候，默认是都会把这个路由安装好的，直接使用就可以了。

步骤一：我们在 components文件夹下面新建两个页面 name.vue 和 age.vue

--- name.vue

<template>
  <div>
      我叫小夏
  </div>
</template>

--- age.vue

 <template>
  <div>
      我年方18
  </div>
</template>

步骤二：在router文件夹下的index.vue 引入文件并配置路由

 import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
// 1.0 引入组件
import Name from '@/components/name'
import Age from '@/components/age'

Vue.use(Router)

// 2.0 定义路由
export default new Router({
   //mode:'history', //路由模式:默认为hash,如果改为history,则需要后端进行配合
   //base:'/',//基路径:默认值为'/'.如果整个单页应用在/app/下,base就应该设为'/app/'.一般可以写成__dirname,在webpack中配置.
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path:'/name',
      name:'Name', //给路由命名,设置的name要唯一!
      component:Name, //就是第一步import的组件
    },
    { //路由懒加载:单页面应用,首页时,加载内容时间过长.运用懒加载对页面组件进行划分,减少首页加载时间
      path:'/age',
      name:'Age',
      component:()=>import('@/components/age'),//此时component则不需要在第一步import
    }
  ]
})

步骤三：在App.vue中配置跳转

1, router-link组件来导航,用户点击后切换到相关视图.

2, router-view组件来设置切换的视图在哪里渲染.(一个页面也可以有多个router-view分别展示特定的视图,并且支持嵌套)

<template>
 <div id="app" class="portal-app">
   <!-- 使用 router-link 组件来导航. -->
   <!-- 通过传入 `to` 属性指定链接. -->
   <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
   <router-link to="/name">点我看看名字 </router-link>
   <router-link to="/age">点我看看年龄 </router-link>
   
   <!-- 路由出口 -->
   <!-- 路由匹配到的组件将渲染在这里 -->
   <router-view/>
  </div>
</template> 

这样基本的路由就算配置好了，点击就能看到组件之间的切换了。


我们在创建项目的时候，已经给我们挂载了路由，是main.js里面的如下：

 new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

通过创建和挂载根实例，让我们的整个程序都有路由功能。

通过注入路由器，我们可以在任何组件内通过 this.$router访问路由器，也可以通过this.$route访问当前路由对象：

Tips :这里我简单说明下$router和$route的区别:

$r$