vue2 route包含的信息和router使用的详细介绍 vue3 useRouter和useRoute 使用以及三种传参方式

Posted 2023-04-03 more名奇妙

vue2中

简单理解为，route是用来获取路由信息的，router是用来操作路由的。

$route是路由信息对象，每一个路由都会有一个route对象，是一个局部的对象,里面主要包含路由的一些基本信息，比如name、meta、path、hash、query、params、fullPath、matched、redirectedFrom...

1. $route.name        当前路径名字

2. $route.meta        路由元信息 可以用在导航守卫查看要跳转的页面是否需要登录才能查看

3. $route.path        字符串，对应当前路由的路径，总是解析为绝对路径，如"/foo/bar"。

4. $route.hash        当前路由的hash值 (不带#) ，如果没有 hash 值，则为空字符串。锚点*

5. $route.query        一个 key/value 对象，表示 URL 查询参数。例如，对于路径 /foo?user=1，则有$route.query.user == 1，如果没有查询参数，则是个空对象。

6. $route.params        一个 key/value 对象，包含了 动态片段 和 全匹配片段，如果没有路由参数，就是一个空对象。

7. $route.fullPath        完成解析后的 URL，包含查询参数和hash的完整路径。

8. $route.matched        数组，包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。

$router是VueRouter的实例，通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象，这个对象中是一个全局的对象，他包含了所有的路由包含了许多关键的对象和属性  

 $router对象是全局路由的实例，是router构造方法的实例

1. $router.go()

    $router.back 后退   

    页面路由跳转 $router.go(-1)为后退，$router.go(1)为前进  $router.forward()为前进

2. $router.push()

    - 字符串this.$router.push('home')

    - 对象this.$router.push(path:'home')

    - 命名的路由this.$router.push(name:'user',params:userId:123)

    - 带查询参数，变成 /register?plan=123   this.$router.push(path:'register',query:plan:'123')

    - push方法其实和<router-link :to="...">是等同的。

    *注意：push方法的跳转会向 history 栈添加一个新的记录，当我们点击浏览器的返回按钮时可以看到之前的页面。

3. $router.replace()        常用来做404页面

    push方法会向 history 栈添加一个新的记录，而replace方法是替换当前的页面，

    不会向 history 栈添加一个新的记录

    this.$router.replace('/') 跳转到首页

vue3

原来的vue2路由是通过this.$route和this.$router来控制的。现在vue3有所变化，useRoute相当于以前的this.$route，而useRouter相当于this.$router

1.我们通过useRouter来手动控制路由变化

import  useRouter  from 'vue-router'
export default 
    setup() 
        const userRouter = useRouter()
        userRouter.push("/home")
    

push就是如上面的代码一样，就是在浏览器的历史记录中追加一个新的记录，你可以通过window.history看到这个记录。 

而replace则是将当前的路由记录替换掉，替换后你如果回退，会发现上一个路由地址已经消失了

import  useRouter  from 'vue-router'
export default 
    setup() 
        const userRouter = useRouter()
        userRouter.push(
            path: '/about',
            replace: true
        )
    

import  useRouter  from 'vue-router'
export default 
    setup() 
        const userRouter = useRouter()
        userRouter.replace(
            path: '/about',
        )
    

2.传参的三种方式 使用useRoute取出来

（1）隐式传参params 

请注意params只与name搭配生效，name就是route配置时的name

import  useRouter  from 'vue-router'
export default 
    setup() 
        const userRouter = useRouter()
        userRouter.push(
            name: 'Home',
            params: 
                name: 'dx',
                age: 18
            
        )
    

通过useRoute来接收params参数

import  useRoute  from 'vue-router'
export default 
    setup() 
        const route = useRoute()
        console.log(route.params)
    

（2）显式传参query

import  useRouter  from 'vue-router'
export default 
    setup() 
        const userRouter = useRouter()
        userRouter.push(
            path: '/',
            query: 
                name: 'dx',
                age: 18
            
        )
    

 通过useRoute来接收query参数

显示query在浏览器的url上，如果你直接通过字符串的方式去取，可能会涉及转码等问题，当然useRoute将这些都处理好了，所以还是推荐通过useRoute.query去取显式路由的参数

import  useRoute  from 'vue-router'
export default 
    setup() 
        const route = useRoute()
        console.log(route.query)
    

总结一下显式路由和隐式路由的区别

传递和接收方式不同外

显式query会很明显的跟在新的url上，而隐式params不会

隐式params在刷新后可能会消失，我们可以在它存在的时候存如缓存中，如localstorage，而query不会

隐式params比显式query相对而言更安全，不会将参数直接暴露给用户

（3）动态路由传参

跟以前一样，我们在配置页面路由的时候就需要配置动态路由的名称，这里配置id

const routes: Array<RouteRecordRaw> = [
  
    path: '/about/:id',
    name: 'About',
    component: About
  
]

useRouter 传递动态参数id = 1 ，大多数时候动态参数都是简单数据类型，如果不是，你没必要用动态参数。 

import  useRouter  from 'vue-router'
export default 
    setup() 
        const userRouter = useRouter()
        userRouter.push(
            path: '/about/1',
        )
    

 通过useRoute来接收动态参数的方式和params一样

import  useRoute  from 'vue-router'
export default 
    setup() 
        const route = useRoute()
        console.log(route.params)
    

router 和 route

参考技术A 在使用了 vue-router 的应用中,路由对象会被注入到每个组件中，赋值为 $route , 当切换路由时，路由对象会被更新。 this.$route 表示当前的路由对象

3. this.$route.router : 路由规则所属的路由器（以及其所属的组件）

this.$router 包含了很多属性和方法， 任何页面都可以调用。 $router 是一组路由或者说是一种机制，他管理了一组路由 $route 。

* $router 具有如下属性
1. push() 方法： 这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。
字符串 this.$router.push('home')
对象 this.$router.push(path:'home')
命名的路由 this.$router.push(name:'user', params:userId: '123') ==》/这里的 params 不生效

3. forward() 方法，前进一步 this.$router.forward();

4. go() 方法 可前进可后退

this.$router.go(-1) 后退一步
this.$router.go(2) 前进两步，但当步数大于历史记录数，就会无效，是无效，而不是取一个最大值
this.$router.go(0) 会刷新页面