Vue3 Router-基础2

六、编程式路由

 可以通过编程的方式进行url跳转

 App.vue

<template>
  <button @click="go">跳转到about</button>
  <router-view></router-view>
</template>

<script>
export default {
  methods: {
    go() {
      //跳转
      this.$router.push('/user/abc')
    }
  }
}
</script>

 或者

this.$router.push({ path: '/user/abc' })

使用命名路由

xxxx

带查询参数

      //http://localhost:3000/user?plan=abc
      this.$router.push({ path: '/user', query: { plan: 'abc' } })

带 hash


      //http://localhost:3000/user#abc
      this.$router.push({ path: '/user',hash: '#abc' })

 替换当前位置，会向 history 添加新记录

this.$router.replace({ path: '/user/abc'})
//等于
this.$router.push({ path: '/user/abc', replace: true})

后退前进

this.$router.go(-1)

 

七、命名路由

路由 

    {
        path: '/user/:id?',
        component: User,
        //给路由命名
        name: 'user',
    },    

 

//超链接跳转 
 <router-link :to="{ name: 'user', params: { id: 'abc' }}">跳转</router-link>
//或者使用代码
 this.$router.push({ name: 'user', params: { id: 'abc' } })

 

八、命名视图

1. 同级显示组件

<template>
  <router-view  name="UserA"></router-view>
  <router-view ></router-view>
  <router-view  name="UserB"></router-view>
</template>

路由配置

    {
        path: '/',
        components: {
            default: Home,
            // LeftSidebar: LeftSidebar 的缩写
            UserA,
            // 它们与 `<router-view>` 上的 `name` 属性匹配
            UserB,
        },
    },

2.嵌套命名视图
补

 

九、重定向和别名

 重定向

const routes = [{ path: '/home', redirect: '/' }]
//或者
const routes = [{ path: '/home', redirect: { name: 'homepage' } }]

动态重定向

补

相对重定向

 补

 

别名

别名url不会跳转,但实际是访问跳转以后的url。

const routes = [{ path: '/', component: Homepage, alias: '/home' }]

多个别名

{ path: '/home', component: Home, alias: ['/user', '/code', '/abc'] }

带参数别名

补

 

十、路由组件传参

 路由

 { path: '/home/:id', component: Home, props: true }

home.vue

<template>
    home
    {{ id }}
</template>

<script>
export default {
    props: ['id']
}
</script>

显示