(一)VUE-router简易入门 (一)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文件
编写文件内容，包括三个内容

.hello{ font-size: 44px; color:red; }

(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 } ] })

【(一)VUE-router简易入门】这样你在访问/hi路径的时候公共模板就会加载新的组件
这样访问输入的时候，跳转到页面不是我们想要的。我们希望类似超链接的形式。这个时候就必须用到这样渲染的时候就会变成li标签