(一)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文件
• 编写文件内容，包括三个内容

• (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路径的时候公共模板就会加载新的组件

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

• 语法结构

 [显示字段]

• 实际代码

  跳转到hi页面
 返回首页