(一)VUE-router简易入门

本节知识点

• 要是不用vue-cli脚手架的话，可以单独安装

npm i vue-router --save-dev

• 要是使用脚手架的话，则可以不用安装了。因为安装vue-cli的时候他提示我们了

解释路由

• 首先让我们看看路由，，这个文件就是路由的核心文件 src/router/index.js

import Vue from 'vue'  //引入vue
import Router from 'vue-router'  //引入router
import HelloWorld from '@/components/HelloWorld'   //加载组件

Vue.use(Router)  //使用组件

//路由的核心文件
export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

让我们增加一个HI的路由文件

我们希望地址栏目里面输入http://localhost:8080/#/hi的时候出现一个新的页面

• (1) 在src/component 目录下面创建一个新的文件 新建Hi.vue文件
• 编写文件内容，包括三个内容 <template></template><script></script><style></style>

<template>
    <div class="hello">
        {{msg}}
    </div>
</template>

<script type="text/ecmascript-6">
    export default {
        name:"Hi",
        data(){
          return {
            msg:"这个就是Hi页面"
          }
        }
    }
</script>

<style scoped >
  .hello{
    font-size: 44px;
    color:red;
  }
</style>

• (2) 在路由里面新增加一个路由配置

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Hi from '@/components/Hi'  //增加一个组件
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
   //增加一个路由
    {
      path:'/hi',
      name:"Hi",
      component:Hi
    }
  ]
})

这样你在访问/hi路径的时候公共模板就会加载新的组件

这样访问输入的时候，跳转到页面不是我们想要的。我们希望类似超链接的形式。这个时候就必须用到<router-link to=" xxxx" tag="li">这样渲染的时候就会变成li标签

• 语法结构

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

• 实际代码

  <router-link to="/hi">跳转到hi页面</router-link>
 <router-link to="/">返回首页</router-link>