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.传递参数


{{item.title}} 



          {{ item.title }}

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的对象写法,则不能使用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

About
Home

你可能感兴趣的:(javascript,es6,Vue,vue.js,javascript,router,路由)