vue组合API结合路由

由于setup中无法访问this，因此无法直接访问this.$router或this.$route,我们使用useRoute和useRouter
useRoute的参数改变由watch监听获取
官网地址：https://next.router.vuejs.org/installation.html
示例：
路由文件：index.js

// index.js
  {
    path: '/routerapi',
    name: 'RouterApi',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/RouterApi.vue'),
    children:[
      {
        path:'',
        component: () => import(/* webpackChunkName: "about" */ '../views/MyPage.vue'),
        redirect:'/routerapi/page/1', //路由重定向
      },
      {
        path:'page/:id',
        component: () => import(/* webpackChunkName: "about" */ '../views/MyPage.vue'),
      },
      {
        path:'article',
        component: () => import(/* webpackChunkName: "about" */ '../views/MyArticle.vue'),
      },
    ],
  },

在页面中引入 <router-link to="/routerapi">路由Api</router-link>
RouterApi.vue文件

// RouterApi.vue文件
<template>
  <div>
    <div id="menu">
      <h5 v-for="item in pages" >
        <router-link  :to="'/routerapi/page/'+item.id">{{item.title}}</router-link>
        <br>
      </h5>
      <h5><hr></h5>
      <h5><router-link  :to="{path:'/routerapi/article',query:{name:'abc',keyword:'hello'}}">文章一</router-link></h5>
      <h5><button @click="$router.push({path:'/routerapi/article',query:{name:'xyz',keyword:'world'}})">文章二</button></h5>
    </div>
    <div id="content">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: "RouterApi",
  data(){
    return{
      pages:[
        {id:1,title:'目录一'},
        {id:2,title:'目录二'},
        {id:3,title:'目录三'},
        {id:4,title:'目录四'},
        {id:5,title:'目录五'},
      ],
    }
  },
}
</script>

<style scoped lang="scss">
#menu{
  width: 30%;
  background: #F0FFF0;
  height: 300px;
  float: left;
}
#content{
  width: 70%;
  background: #cccccc;
  height: 300px;
  float: right;
}
a {
  font-weight: bold;
  color: #2c3e50;

&.router-link-exact-active {
   color: #42b983;
 }
}

</style>

MyPage.vue文件

// MyPage.vue文件
<template>
  <h1>mypage</h1>
  <h3>{{pid}}</h3>
  <h2>id:{{id}}</h2>
</template>

<script>
import {useRoute,useRouter,onBeforeRouteLeave} from 'vue-router';
import {ref, watch} from "vue";
export default {
  name: "MyPage",
  computed:{
    pid(){
      return this.$route.params.id
    },
  },
  setup(){
    const route = useRoute()
    const router = useRouter()
    let id = ref()
    watch(()=>route.params.id,(newid)=>{
       id.value = newid
      //异步请求服务器API查找用户信息
    },{immediate:true})
    //5秒后跳转
    // setTimeout(()=>{
    //   router.push({path:'/routerapi/article',query:{name:'888888',keyword:'666666'}})
    // },5000)
    onBeforeRouteLeave((to,from)=>{
      let answer = window.confirm(`你确定要从${from.fullPath}到${to.fullPath}`);
      if (!answer) return false
    })
    return {
      id
    }
  },
}
</script>

<style scoped>

</style>

MyArticle.vue文件

// MyArticle.vue文件
<template>
  <h1>myarticle</h1>
  <h3>{{$route.query.name}}</h3>
  <h3>{{$route.query.keyword}}</h3>
</template>

<script>
import {useRoute,useRouter} from 'vue-router';
import {ref, watch} from "vue";
export default {
  name: "MyArticle",
  computed:{
    pid(){
      return this.$route.params.id
    },
  },
  setup(){
    const route = useRoute()
    const router = useRouter()
    let id = ref()
    watch(()=>route.params.id,(newid)=>{
      id.value = newid
      //异步请求服务器API查找用户信息
    },{immediate:true})
    console.log(route.query.name,route.query.keyword)
    return {
      id
    }

  },
}
</script>

<style scoped>

</style>