前言

在上一篇博客vue学习笔记(九)vue-cli中的组件通信内容中，我们学习组件通信的相关内容和进行了一些组件通信的小练习，相信大家已经掌握了vue-cli中的组件通信，而本篇博客将会带你更上一层楼，说实话有关路由的知识我有提到过一点，使用webstorm搭建vue-cli项目这篇博客结尾的示例就是有关路由的一点小知识，但是当时只是做了一个小小的案例，而本篇博客将会详细讲解vue中的路由相关知识，那么一起来看看吧！

本章目标

了解Vue Router的简单介绍
学会vue路由的传参方式
学会vue路由传参的实战

Vue Router的介绍

Vue Router是一个Vue核心插件，是Vue.js官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue router单页面应用中，则是路径之间的切换，也就是组件的切换。包含的功能有：

嵌套的路由/视图表
模块化的、基于组件的路由配置
路由参数、查询、通配符
基于 Vue.js 过渡系统的视图过渡效果
细粒度的导航控制
带有自动激活的 CSS class 的链接
HTML5 历史模式或 hash 模式，在 IE9 中自动降级
自定义的滚动条行为

参考资源

中文帮助：https://router.vuejs.org/zh/

英文帮助：https://router.vuejs.org/

Git源码：https://github.com/vuejs/vue-router

vue router中有三个比较重要的概念，route,routes,router,接下来我们一一介绍它们。

route，它是一个路由,代表一个访问的地址。
routes 是一组路由，把route组合起来，形成一个数组。
router 是一个机制，相当于一个管理者，它来管理路由，举个例子来说：假设我们点击按钮需要查询数据怎么办？这时router 就起作用了，它到routes 中去查找，去找到对应查询数据的路由，然后将数组返回到页面上。
客户端中的路由，实际上就是dom 元素的显示和隐藏。当页面中显示home 内容的时候，about 中的内容全部隐藏，反之也是一样。客户端路由有两种实现方式：基于hash 和基于html5 history api。

接下来我们通过两种方式来实现vue-router的使用，这两种方式分别是网页版的vue-router的使用和vue-cli版vue-router的使用

网页版

直接下载 / CDN

https://unpkg.com/vue-router/dist/vue-router.js

Unpkg.com 提供了基于 NPM 的 CDN 链接。上面的链接会一直指向在 NPM 发布的最新版本。你也可以像 https://unpkg.com/[email protected]/dist/vue-router.js 这样指定版本号或者 Tag。

NPM

使用nodejs包管理器安装

npm install vue-router

如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能

扫描二维码关注公众号，回复： 8190504 查看本文章

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

用 Vue.js + Vue Router 创建单页应用，是非常简单的。使用 Vue.js ，我们已经可以通过组合组件来组成应用程序，当你要把 Vue Router 添加进来，我们需要做的是，将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染它们

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页版vue-router</title>
</head>
<body>
<div id="app">
    <h1>{{msg}}</h1>
    <!--使用router-link组件来导航-->
    <!--通过传入to属性指定链接-->
    <!--router-link组件默认渲染成a标签-->
    <router-link to="/foo">Foo</router-link>
    <router-link to="/bar">Bar</router-link>
    <!--路由出口-->
    <!--路由匹配到的组件将渲染到这里-->
    <router-view></router-view>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
  //1.定义组件
  const foo={template:'<h1>这是foo组件</h1>'}
  const bar={template: '<h1>这是bar组件</h1>'}
  //2.定义routes
  const routes=[
    {
      path:'/foo',
      component:foo,
      name:foo,
    },
    {
      path:'/bar',
      component:bar,
      name:bar
    }
  ]
  //3.定义router
  const router=new VueRouter({
    routes  //相当于routes:routes
  })
  //4.创建和挂载根实例
  const  vm=new Vue({
    el:'#app',  //挂载元素
    data:{
      msg:'网页版vue-router'
    },
    router:router
  })
</script>
</body>
</html>

结果：

可以看到我们已经实现的简单的路由切换，但是这种方式我们以后的开发中极少用到，作为初学者还是有必要讲解一下

步骤分析：

引入js和挂载元素
定义组件和定义routes管理每一个路由，一个路由可以对应一个组件，例如示例中/foo对应foo组件，/bar对应bar组件
定义router，用来处理请求每一个route对应的信息

注意：<router-view></router-view>这个标签特别重要，如果没有这个标签vue-router将会失效。

vue-cli版

接下来我带大家讲解vue-cli版vue-router的使用，这也是后面开发中常用的手法

安装：

npm install vue-router
yarn add vue-router

这两种方式任意选一种都可以

若在构建vue-cli的时候，在询问“nstall vue-router”（是否安装vue-router）时，选择“Y”,这里就不用重复安装vue-router。使用WebStorm创建一个vue-cli项目，选择使用router：

(1)/src/components/test03新建4个组件，分别是IndexComponent.vue,HomeComponent.vue,DefaultComponent.vue,AboutComponent.vue,新建目录结构如下:

(2)在对应的组件写上相应的代码

IndexComponent.vue

<template>
    <div>
      <h1>{{msg}}</h1>
    </div>
</template>

<script>
    export default {
        name: "IndexComponent",
      data(){
          return{
            msg:'这是index组件'
          }
      }
    }
</script>

<style scoped>
  
</style>

HomeComponent.vue

<template>
    <div>
      <h1>{{msg}}</h1>
    </div>
</template>

<script>
    export default {
        name: "HomeComponent",
      data(){
          return{
            msg:'这是home组件'
          }
      }
    }
</script>

<style scoped>
  h1{
    color: red;
  }
</style>

AboutComponent.vue

<template>
    <div>
      <h1>{{msg}}</h1>
    </div>
</template>

<script>
    export default {
        name: "AboutComponent",
      data(){
          return{
            msg:'这是about组件'
          }
      }
    }
</script>

<style scoped>
  h1{
    color: green;
  }
</style>

DefaultComponent.vue

<template>
    <div>
      <h1>{{msg}}</h1>
    </div>
</template>

<script>
    export default {
        name: "DefaultComponent",
      data(){
          return{
            msg:'这是default组件'
          }
      }
    }
</script>

<style scoped>
  h1{
    color: pink;
  }
</style>

(3)自定义router并在main.js注册

其实我们可以自定义router,自定义的router和原来的router都差不多，我们/src/router新建一个test.js并编写对应的代码

test.js

import Vue from 'vue'
import Router from  'vue-router'
import Index from '@/components/test03/IndexComponent'
import Home from '@/components/test03/HomeComponent'
import Default from '@/components/test03/DefaultComponent'
import About from '@/components/test03/AboutComponent'
Vue.use(Router)
export  default  new Router({
  routes:[
    {
      path:'/',
      component:Index,
      name:Index
    },
    {
      path:'/home',
      component:Home,
      name: Home
    },
    {
      path:'/about',
      component:About,
      name:About
    },
    {
      path:'/default',
      component:Default,
      name:Default
    }
  ]
})

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'

// import router from './router'　　　　//这个是最开始的路由

import  router from './router/test'　　//修改原来的路由，换成自己定义的路由
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: {},
  template: ''
})

修改之后IndexComponent.vue

<template>
    <div>
      <h1>{{msg}}</h1>
      <router-link to="/home">Home</router-link>
      <router-link to="/about">About</router-link>
      <router-link to="/default">Default</router-link>
      <router-view></router-view>
    </div>
</template>

<script>
    export default {
        name: "IndexComponent",
      data(){
          return{
            msg:'这是index组件'
          }
      }
    }
</script>

<style scoped>

</style>

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>vue_01</title>
  </head>
  <body>
    <div id="app">
      <!--对应的组件内容渲染到router-view中-->
      <router-view></router-view>
    </div>
    <!-- built files will be auto injected -->
  </body>
</html>

(4)测试结果

vue-router两种方式的使用我已经讲解完成了，写得如此详细，想必大家都可以看得懂。

路由模式

vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载

http://localhost:8080/#/home

如果不想要很hash，可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面

const router = new VueRouter({
　　mode: 'history',
　　routes: [...]
}

当使用 history 模式时，URL 就像正常的 url

http://localhost:8080/home

test.js

import Vue from 'vue'
import Router from  'vue-router'
import Index from '@/components/test03/IndexComponent'
import Home from '@/components/test03/HomeComponent'
import Default from '@/components/test03/DefaultComponent'
import About from '@/components/test03/AboutComponent'
Vue.use(Router)
export  default  new Router({
  mode:'history',
  routes:[
    {
      path:'/',
      component:Index,
      name:Index
    },
    {
      path:'/home',
      component:Home,
      name: Home
    },
    {
      path:'/about',
      component:About,
      name:About
    },
    {
      path:'/default',
      component:Default,
      name:Default
    }
  ]
})

结果：

不过这种模式需要后台配置支持。如果后台没有正确的配置，当用户在浏览器直接访问 http://site.com/user/id 就会返回 404，详细请参考：https://router.vuejs.org/zh/guide/essentials/history-mode.html

vue学习笔记(十)路由 vue学习笔记(九)vue-cli中的组件通信使用webstorm搭建vue-cli项目

前言

本章目标

Vue Router的介绍

网页版

直接下载 / CDN

NPM

vue-cli版

(1)/src/components/test03新建4个组件，分别是IndexComponent.vue,HomeComponent.vue,DefaultComponent.vue,AboutComponent.vue,新建目录结构如下:

(2)在对应的组件写上相应的代码

(3)自定义router并在main.js注册

路由模式

vue路由的传参方式

vue路由传参实战

总结

猜你喜欢

vue学习笔记(十)路由 vue学习笔记(九)vue-cli中的组件通信 使用webstorm搭建vue-cli项目

前言

本章目标

Vue Router的介绍

网页版

直接下载 / CDN

NPM

vue-cli版

(1)/src/components/test03新建4个组件，分别是IndexComponent.vue,HomeComponent.vue,DefaultComponent.vue,AboutComponent.vue,新建目录结构如下:

(2)在对应的组件写上相应的代码

(3)自定义router并在main.js注册

路由模式

vue路由的传参方式

vue路由传参实战

总结

猜你喜欢

vue学习笔记(十)路由 vue学习笔记(九)vue-cli中的组件通信使用webstorm搭建vue-cli项目