• 声明式页面跳转 使用的是内置组件

      点击跳转到/home

    • 命令式页面跳转 使用js来实现页面跳转

      1. <template>
      2. <div>
      3.   智能应用
      4.   <button @click='back'>返回</button>
      5.   <button @click="gotopush">去指定页面</button>
      6.   <button @click="gotoreplace">replace</button>
      7. </div>
      8. </template>
      9. <script lang="ts">
      10. import { defineComponent } from "vue";
      11. import{useRouter} from 'vue-router'
      12. export default defineComponent({
      13. setup() {
      14.   const router =useRouter()
      15.   console.log(router)
      16.   const back = () => {
      17.       router.back() // 底层是go(-1)
      18.   };
      19.   const gotopush=()=>{
      20.       // router.push('/home_1') 
      21.       router.push({name:'list',params:{id:1},query:{a:1,title:'衣服'}})
      22.   }
      23.   const gotoreplace=()=>{
      24.       // router.replace('/home_1')
      25.       router.replace({name:'list',params:{id:1},query:{a:1,title:'衣服'}})
      26.   }
      27.   return {
      28.     back,gotopush,gotoreplace
      29.   };
      30. },
      31. });
      32. </script>

      push 里的参数和声明式页面跳转的:to="" 参数类似
      push和replace区别：

    • push会将我们的跳转操作放入浏览器的历史记录，我们可以通过浏览器的前进和后退按钮进行路由的访问和跳转