本节知识点
- 要是不用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>
