vue——路由、query、params、props、replace

路由

1.路由就是一组key-value的对应关系

2.多个路由，需要经过路由器的管理

SPA:single page web application（单页面应用：只有一个html页面）

vue-router：vue的一个插件，专门用来实现SPA应用

对SPA应用的理解：

1.单页面web应用

2.整个应用只有一个完整的页面

3.点击页面中的导航链接不会刷新页面，只会做页面的局部刷新

4.数据需要通过ajax请求获取

什么是路由

路由就是一组映射关系（key-value），key为路径，value可能是function或component，多个路由需要路由器（router）进行管理

路由的分类

1.后端路由

​ 1.1理解：value是function，用于处理客户端提交的请求

​ 1.2工作过程：服务器接收到一个请求时，根据请求路径找到匹配的函数来处理请求，返回响应数据

2.前端路由：

​ 2.1理解：value是component，用于展示页面内容（key是路径，value是组件）

​ 2.2工作过程：当浏览器的路径改变时，对应的组件就会显示

基本使用

1.安装vue-router,命令：npm i vue-router

2.应用插件

// 引入VueRouter
import VueRouter from "vue-router"
// 使用VueRouter插件
Vue.use(VueRouter)

3.编写配置项

// 用于创建应用的路由器
import VueRouter from "vue-router"
//导入组件
import About from "../components/About"
import Home from "../components/Home"
//创建vue-router实例对象，管理多个路由规则
export default new VueRouter({
    routes: [{
        path: '/home',
        component: Home
    }, {
        path: '/about',
        component: About
    }]
})

4.实现切换（切换的高亮样式：active-class=“样式”）

<router-link active-class="active" to="path设置的路由路径">内容</router-link>

5.指定组件展示位置

<router-view></router-view>

$route：路由规则（有多个，）

$router：整个应用的路由器，只有一个

路由注意点

1、路由组件通常存放在pages/views文件夹，一般组件通常存放在components文件夹

2、通过切换，“隐藏”了的路由组件默认是被销毁掉的，需要的时候再去挂载

3、每个组件都有自己的$route属性，里面存储着自己的路由信息

4.整个应用只有一个router，可以通过组件的$router属性获取到

嵌套路由（多级路由）

1.配置规则，使用children配置项

routes:[
	{
		path:'/home',
		component:Home,
		children:[
			{
                //这里的路径前面不用加/，遍历到children里面，会自动添加/
				path:'news',
				component:News
			}
		]
	}
]

2.跳转（要写完整路径）

<router-link to="/home/news">News</router-link>

路由的query参数

1.传递参数

<!-- 跳转路由并携带query参数，to的字符串写法 -->
<router-link :to="`/home/msg/show?id=${item.id}&title=${item.title}`">{{item.title}}</router-link> 

<!-- 跳转路由并携带query参数，to的对象写法 -->
<router-link :to="{
            path: '/home/msg/show',
            query: { id: item.id, title: item.title },
          }">
          {{ item.title }}
</router-link>

2.接收参数

$route.query.属性
如：
$route.query.id
$route.query.title

命名路由

1.作用：可以简化路由的跳转

2.如何使用

​ 2.1给路由命名：

routes: [{
        path: '/home',
        component: Home,
        // 二级路由
        children: [
            {
                path: 'msg',
                component: Msg,
                //三级路由
                children: [{
                 // 命名路由
                    name: 'zhanshi',
                    path: 'show',
                    component: Show
                }]
            }
        ]
    }]

​ 2.2简化跳转：

//简化前：需要写完整的路径
<router-link to="/home/msg/show">跳转</router-link>
//简化后：直接通过name值跳转
<router-link :to="{name:'zhanshi'}">跳转</router-link>
//配合参数写法
<router-link :to="{name:'zhanshi',query:{id:001,title:'hello'}}">跳转</router-link>

路由的params参数

1.配置路由，声明接收params参数

routes: [{
        path: '/home',
        component: Home,
        // 二级路由
        children: [
            {
                path: 'msg',
                component: Msg,
                //三级路由
                children: [{
                 // 命名路由
                    name: 'zhanshi',
                    //使用占位符声明接收params参数
                    path: 'show/:id/:title',
                    component: Show
                }]
            }
        ]
    }]

2.传递参数

<!-- 跳转路由并携带params参数，to的字符串写法 -->
<router-link :to="`/home/msg/show/666/hello`">跳转
</router-link> -->

<!-- 跳转路由并携带params参数，to的对象写法，-->
<router-link :to="{
            name: 'zhanshi',
            params: { id: 666.id, title: 'hello' },
          }">
          跳转
</router-link>

特别注意：路由携带params参数，若使用to的对象写法，则不能使用path配置项，必须用name配置

3.接收参数

$route.params.属性
如：
$route.params.id
$route.params.title

路由的props配置

作用：让路由组件更方便的收到参数

routes: [{
        // 命名路由
        path: '/home',
        component: Home,
        // 二级路由
        children: [
            {
                path: 'msg',
                component: Msg,
                children: [{
                    name: 'zhanshi',
                    // params参数写法
                    path: 'show/:id/:title',
                    // path: 'show',

                    component: Show,
                    // props的第一种写法:值为对象，该对象中的所有的key-value都会以props的形式传给show组件，不推荐使用，传递的是死数据
                    /*  props: {
                         id: 1,
                         name: 'zs'
                     } */
                    // props的第二种写法：值为布尔值，若布尔值为真，就会把该组件收到的所有params参数（query参数无效），以props的形式传给show组件
                    // props: true,
                    // props的第三种写法：值为函数,形参是$route（返回query或者params都可以）
                    props($route) {
                        return { id: $route.params.id, title: $route.params.title }
                    }
                    // 参数$route解构赋值
                    /* props({ query }) {
                        return { id: query.id, title: query.title }
                    } */
                    // 参数连续解构赋值
                    /* props({ query: { id, title } }) {
                        return { id, title }
                    } */
                }]
            }
        ]
    }]

的replace属性

1.作用：控制路由跳转时操作浏览器记录的模式（在栈里面的）

2.浏览器的历史记录有两种写入方式,分别为push和replace，push是追加历史记录，指针默认指向最新一条记录。replace是替换当前记录（新替换旧的，替换栈顶的那条记录，始终只有一条记录，不能前进和后退），路由跳转时默认选择push

<router-link replace class="list-group-item" active-class=" active" to="about" >About</router-link >
<router-link :replace="true" class="list-group-item" active-class=" active" to="/home" >Home</router-link >