1.vue-router的理解
vue-router是vue的一个插件,专门用来实现SPA应用。SPA也就是单页Web应用,特点是:整个应用只有一个完整的页面,点击页面中的导航链接不会刷新页面,只会做页面的局部更新,数据需要通过ajax请求获取。
2.路由的理解
一个路由就是一组映射关系(key-value)
3.index.js中写路由的核心代码
// 该文件是专门用于创建整个应用的路由器
// 第一步引入插件(本质是一个构造函数)
import VueRouter from 'vue-router'
// 引入一下用到的组件
import About from '../components/About'
import FacilityYear from '../views/facilityYear.vue'
// 第二步创建router实例对象并暴露
export default new VueRouter({
routes: [
{
// path是路径
path: "/about",
//跳转的组件
component: About
},
{
path: '/facilityYear',
name: 'facilityYear',
component: FacilityYear
},
]
})
4.路由的使用
由路由管理的地方 a标签转换成 router-link 标签 href="相对路径" 变成 to="路由路径
<router-link to="/facilityYear">健身地图</router-link>
5.路由的传参
有两种传参方式,第一种query传参 第二种params传参
query传参
有两种写法 一个是字符串写法直接写在路径中拼接 ?+参数
<router-link to="/facilityYear?id=666&title=你好">健身地图</router-link>
第二种时对象写法 ,把路径单独写,数据单独写
<router-link :to="{
path: '/facilityYear',
query: {
id:666,
title:'你好'
}
}">健身地图</router-link>
组件接收参数
<h3>信息编号:{{ $route.query.id }}</h3>
<h3>信息标题:{{ $route.query.title }}</h3>
params传参
第一种直接路径传递参数
<router-link :to="`/facilityYear/${n.id}/${n.name}`">健身地图</router-link>
第二种方式写成对象形式
第二种方式必须写name不可以用path作为路径
<router-link :to="{
// 用params传递参数时用到他的对象写法中不可使用 path:'路径'
name: 'facilityYear',
params: {
id:666,
name: 777
}
}">健身地图</router-link>
组件接收参数
<h3>信息编号:{{ $route.query.id }}</h3>
<h3>信息标题:{{ $route.query.title }}</h3>