[1]Vue-router入门

资料来源于技术胖的个人网站

• 安装vue-router
  vue-router是一个插件包，所以我们还是需要用npm来进行安装的。

npm install vue-router --save-dev

如果你在使用vue-cli中已经选择安装了vue-router，那这里不需要重复安装了。

• 解读router/index.js文件

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   //对应的组件模板
    }
  ]
})

• router-link制作导航
  我们需要的是在页面上有个像样的导航链接，我们只要点击就可以实现页面内容的变化。制作链接需要<router-link>标签，我们先来看一下它的语法。

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

to：是我们的导航路径，要填写的是你在router/index.js文件里配置的path值，如果要导航到默认首页，只需要写成to=”/”

[显示字段] ：就是我们要显示给用户的导航名称，比如首页 新闻页。