vue路由的使用

路由1. 理解: 一个路由(router)就是一组映射关系(key-value),多个路由需要的路由器(router)进行管理2. 前端路由: key是路径,value是组件1.基本使用安装vue-router,命令: npm i vue-router引入vue-router之后应用插件: Vue.use(VueRouter)编写router配置项//该文件专门创建整个应用的路由器import V

不为霜停

4212人浏览 · 2022-01-16 13:58:43

不为霜停 · 2022-01-16 13:58:43 发布

路由

1. 理解: 一个路由(route)就是一组映射关系(key-value),多个路由(routes)需要的路由器(router)进行管理
2. 前端路由: key是路径,value是组件

1.基本使用

安装vue-router,命令: npm i vue-router
引入vue-router之后应用插件: Vue.use(VueRouter)

编写router配置项

//该文件专门创建整个应用的路由器
import VueRouter from 'vue-router'
//引入组件
import About from '../components/About'
import Home from '../components/Home'

//创建并暴露一个路由器
export default new VueRouter({
    routes:[
        {
            path:'/about',
            component:About
        },
        {
            path:'/home',
            component:Home
        }
    ]
})

实现切换(active-class可配置高亮样式)

<router-link class="list-group-item" active-class="active" to="/about">About</router-link>

指定展示位置

<router-view></router-view>

2.几个注意点

路由组件通常存放在page文件夹,一般组件通常存放在component文件夹
通过切换,'隐藏’了的路由组件,默认是被销毁掉的,需要的时候再去挂载
每个组件都有自己的$route属性,里面储存着自己的路由信息
整个应用只有一个router,可以通过组件的$router属性获取到

3.多级路由

配置路由规则,使用chlidren配置项:

 routes:[
        {
            path:'/about',
            component:About
        },
        {
            path:'/home',
            component:Home,
            children:[
                {
                    path:'message',
                    component:Message
                },
                {
                    path:'news',
                    component:News
                }
            ]
        },
        
    ]

跳转(要写完整的路径):

<router-link class="list-group-item" active-class="active" to="/home/news">News</router-link>

路由参数有几种?

query、params 两个属性可以传递参数

query参数 : 不属于路径当中的一部分，类似于 get 请求，

地址栏表现为 /search?k1=v1&k2=v2
query 参数对应的路由信息 path: “/search”

params参数：属于路径当中的一部分，需要注意，在配置路由的时候，需要占位 ,

地址栏表现为 /search/v1/v2
params参数对应的路由信息path:"/search/:v1/:v2"
注:路由携带params参数的时候,若使用to的对象写法(常用),则不能使用path配置项,必须使用name配置!

4.路由的query参数

传递参数:

<!-- 跳转路由并携带参数,to的字符串写法 -->
          <!-- <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{{message.title}}</router-link>&nbsp;&nbsp; -->
          
          <!-- 跳转路由并携带query参数,to的对象写法 -->
            <router-link :to="{
                path:'/home/message/detail',
                query:{
                    id:message.id,
                    title:message.title
                }
            }">
              {{message.title}}
            </router-link>

2.接收参数:

$route.query.id
$route.query.title

5.命名路由

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

2.如何使用

给路由命名:

path:'/home',
            component:Home,
            children:[
                {
                    path:'message',
                    component:Message, 
                    children:[
                        {
                            name:'xiangqing',
                            path:'detail',
                            component:Detail
                        }
                    ]
                },
                {
                    path:'news',
                    component:News
                }
            ]

简化跳转

<router-link class="list-group-item" active-class="active" :to="{name:'guanyu'}">About</router-link>
          <router-link class="list-group-item" active-class="active" to="/home">Home</router-link>

<router-link :to="{
                name:'xiangqing',
                query:{
                    id:message.id,
                    title:message.title
                }
            }">
              {{message.title}}
            </router-link>

6.路由的params参数

配置路由,声明接收params参数

path:'/home',
            component:Home,
            children:[
                {
                    path:'message',
                    component:Message, 
                    children:[
                        {
                            name:'xiangqing',
                            path:'detail/:id/:title',
                            component:Detail
                        }
                    ]
                },
                {
                    path:'news',
                    component:News
                }
            ]

传递参数

<!-- 跳转路由并携带params参数,to的字符串写法 -->
          <!-- <router-link :to="`/home/message/detail/${message.id}/${message.title}`">{{message.title}}</router-link>&nbsp;&nbsp; -->
          
          <!-- 跳转路由并携带query参数,to的对象写法 -->
            <router-link :to="{
                name:'xiangqing',
                params:{
                    id:message.id,
                    title:message.title
                }
            }">
              {{message.title}}
            </router-link>

注意:路由携带params参数的时候,若使用to的对象写法,则不能使用path配置项,必须使用name配置!

接收参数
```
$route.params.id
$
```

7.路由的props配置

作用:让路由组件更加方便的接收到参数

{
                            
         name:'xiangqing',
         path:'detail/',              
         component:Detail,


//props的第一种写法,值为对象,该对象的所有key-value都会以props的形式传给Detail组件.
 props:{a:1,b:'hello'}
 
//props的第二种写法,值为布尔值.若布尔值为真,就会把该路由组件收到的所有params参数,以props的形式传给Detail组件
props:true

//props的第三种写法,值为函数,
 props({query:{id,title}}){//连续结构赋值的写法
     return{id:id,title:title}
 }

props($route){
    return{                     			
    id:$route.query.id,
    title:$route.query.title
          }
             }

8.`<router-link>`的replace属性

作用: 控制路由跳转时操作浏览器历史纪录的模式
浏览器历史记录有两种写入方式: 分别为push和replace,push是追加历史记录,replace是替换当前记录,路由跳转的时候默认为push
如何开启repalce模式,<router-link replce.....>News</router-link>

9.编程时路由导航

作用:不借助<router-link>实现路由跳转,让路由跳转更加灵活

具体编码:

//$router的两个API(
pushShow(m){
      this.$router.push({
        name:'xiangqing',
        query:{
          id:m.id,
          title:m.title
        }
      })
    },
    replaceShow(m){
      this.$router.replace({
        name:'xiangqing',
      query:{
        id:m.id,
        title:m.title
      }
      })
    }

forward(){
      this.$router.forward()
    },
back(){
      this.$router.back()
    },
   go(){
      this.$router.go(2)
    }

10.缓存路由组件

作用:让不展示的路由组件保持挂载,不被销毁

具体编码

<keep-alive include="News">
<router-view></router-view>
</keep-alive>

11.两个新的生命周期钩子

作用:路由组件所独有的两个钩子,用于捕获路由组件的激活状态
具体名字:
1. actived路由组件被激活时触发
2. deactived路由组件失活时触发

12.路由守卫

作用:对路由进行权限控制
分类:全局守卫,独享守卫,组件内守卫
全局守卫:

//全局前置路由守卫---初始化的时候被调用,每次路由切换之前被调用
router.beforeEach((to,from,next)=>{
console.log('前置路由守卫')
if(to.meta.isAuth)//判断是否需要鉴权
{
    if(localStorage.getItem('school')==='atguigu')//权限控制的具体规则
    next()
    else
    alert('学校名称不正确,无权查看!')
}   
else next()//放行
})
//全局后置路由守卫---初始化的时候被调用,每次路由切换之后被调用
router.afterEach((to,from)=>{
console.log('后置路由守卫')
document.title = to.meta.title || '硅谷系统'//修改网页的title
})

独享路由守卫

beforeEnter:(to,from,next)=>{
                     if(localStorage.getItem('school')==="atguigu")
                     next()
                     else
                     alert('学校名称不正确,无权查看!')
                 }

组件内守卫

//进入守卫,通过路由规则,进入该组件时被调用
 beforeRouteEnter (to, from, next) {}

//离开守卫,通过路由规则,离开该组件时被调用
beforeRouteLeave (to, from, next) {}

13.路由器的两种工作模式

对于一个url来说,什么是hash值?----#及其后面的内容就是hashzhi
hash值不会包含在HTTP请求之中,即:hash值不会带给服务器
hash模式:
1. 地址中永远带着#号,不美观
2. 若以后将地址通过第三方手机app分享,若app校验严格,则地址也会被标记为不合法
3. 兼容性较好
history模式:
1. 地址干净,美观
2. 兼容性和hash模式相比略差
3. 应用部署上线时需要后端人员支持,解决刷新页面服务端404的问题

考题

路由传递参数（对象写法）path是否可以结合params参数一起使用?

//不可以：不能这样书写,程序会崩掉,必须使用name
<router-link :to="{
                name:'xiangqing',
                params:{
                    id:message.id,
                    title:message.title
                }
            }">

如何指定params参数可传可不传?

 //在使用params传参的时候,路由配置如下
 path: "/search/:value?", ?表示该参数可传可不传

params参数可以传递也可以不传递，但是如果传递是空串，如何解决？

this.$router.push({
  name: "home",
  params: {
    id: "" || undefined,//在参数的后面加入
  },
});

如果指定name与params配置, 但params中数据是一个"", 无法跳转，路径会出问题
路由组件能不能传递props数据?
多次执行相同的 push 报错问题
原因: push是一个promise,promise需要传递成功和失败两个参数,我们的push中没有传递
解决方法一:

this.$router.push({name:‘Search’,params:{keyword:"…"||undefined}},()=>{},()=>{})
//后面两项分别代表执行成功和失败的回调函数,此方法只能解决这一次的问题

解决方法二:在router中的index重写该方法

//1、先把VueRouter原型对象的push，保存一份
let originPush = VueRouter.prototype.push;
//2、重写push|replace
//第一个参数：告诉原来的push，跳转的目标位置和传递了哪些参数
VueRouter.prototype.push = function (location, resolve, reject) {
  if (resolve && reject) {
    originPush.call(this, location, resolve, reject);
  } else {
    originPush.call(
      this,
      location,
      () => {},
      () => {}
    );
  }
};

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^