Vue-router笔记 第1节：Vue-router入门

安装vue-router

vue-router是一个插件包，所以我们还是需要用npm来进行安装的。打开命令行工具，进入你的项目目录，输入下面命令。

 

1	npm install vue-router --save-dev

如果你安装很慢，也可以用cnpm进行安装，如果你在使用vue-cli中已经选择安装了vue-router，那这里不需要重复安装了。

解读router/index.js文件

我们用vue-cli生产了我们的项目结构，你可以在src/router/index.js文件，这个文件就是路由的核心文件，我们先解读一下它。如果你还不会使用vue-cli，我正好有一套课程是专门讲vue-cli的，你可以学习一下《技术胖的Vue-cli视频教程》。

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

import Vue from 'vue'   //引入Vue import Router from 'vue-router'  //引入vue-router import Hello from '@/components/Hello'  //引入根目录下的Hello.vue组件   Vue.use(Router)  //Vue全局使用Router   export default new Router({   routes: [              //配置路由，这里是个数组     {                    //每一个链接都是一个对象       path: '/',         //链接路径       name: 'Hello',     //路由名称，       component: Hello   //对应的组件模板     }   ] })

上边的代码中已经对每行都进行了注释，其实在这个路由文件里只配置了一个功能，就是在进入项目时，显示Hello.vue里边的内容代码。

增加一个Hi的路由和页面

对路由的核心文件熟悉后，我们试着增加一个路由配置，我们希望在地址栏输入  http://localhost:8080/#/hi   的时候出现一个新的页面，先来看一下我们希望得到的效果。

看到了效果，我们看一下具体的操作步骤：

• 在src/components目录下，新建 Hi.vue 文件。
• 编写文件内容，和我们之前讲过的一样，文件要包括三个部分<template><script>和<style>。文件很简单，只是打印一句话。
  
   

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

  <template>   <div class="hello">     <h1>{{ msg }}</h1>   </div> </template>   <script> export default {   name: 'hi',   data () {     return {       msg: 'Hi, I am JSPang'     }   } } </script>     <style scoped>   </style>

• 引入 Hi组件：我们在router/index.js文件的上边引入Hi组件
  
   

  1	import Hi from '@/components/Hi'

• 增加路由配置：在router/index.js文件的routes[]数组中，新增加一个对象，代码如下。
  
   

  1 2 3 4 5

  {   path:'/hi',   name:'Hi',   component:Hi }

通过上面的配置已经可以增加一个新的页面了。是不是觉的自己的Vue功力一下子就提升了一个档次。为了方便小伙伴查看，贴出现在的路由配置文件:

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

import Vue from 'vue'   //引入Vue import Router from 'vue-router'  //引入vue-router import Hello from '@/components/Hello'  //引入根目录下的Hello.vue组件 import Hi from '@/components/Hi'   Vue.use(Router)  //Vue全局使用Router   export default new Router({   routes: [              //配置路由，这里是个数组     {                    //每一个链接都是一个对象       path: '/',         //链接路径       name: 'Hello',     //路由名称，       component: Hello   //对应的组件模板     },{       path:'/hi',       name:'Hi',       component:Hi     }   ] })

router-link制作导航

现在通过在地址栏改变字符串地址，已经可以实现页面内容的变化了。这并不满足需求，我们需要的是在页面上有个像样的导航链接，我们只要点击就可以实现页面内容的变化。制作链接需要<router-link>标签，我们先来看一下它的语法。

 

1	<router-link to="/">[显示字段]</router-link>

• to：是我们的导航路径，要填写的是你在router/index.js文件里配置的path值，如果要导航到默认首页，只需要写成  to=”/”  ，
• [显示字段] ：就是我们要显示给用户的导航名称，比如首页  新闻页。

明白了router-link的基本语法，我们在 src/App.vue文件中的template里加入下面代码，实现导航。

 

1 2 3 4

<p>导航 ：    <router-link to="/">首页</router-link>    <router-link to="/hi">Hi页面</router-link> </p>

现在我们访问页面，发现已经多出了导航。localhost:8081/#/

总结：这节课我们在vue-cli的构建下对vue-router有了一个基本的了解，学会了vue-router的核心文件的基本结构，学会了如何添加一个新的模板页面，还学会了用<router-link>标签设置导航。在这里我必须要再强调一遍，路由是Vue中最重点的内容，你必须完全掌握学会。你可以先听一遍视频教程，然后跟着文字教程来作你的练习。一步一个脚印，我们都会成为Vue大神的，小伙伴们加油了！！！