Vue中的路由

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>