路由之编程式导航

两种主要的导航方式

在Web开发中，路由是指在单页应用（SPA）中控制页面显示逻辑的方法。Vue的路由系统，即Vue Router，提供了两种主要的导航方式：router.push和router.replace。这两种方法都用于跳转到不同的路由，但它们在如何处理浏览器的历史记录方面存在差异。
1. router.push
功能：router.push用于导航到不同的URL。当调用这个方法时，新的路由会被推入到浏览器的历史记录栈中。这意味着用户可以通过点击浏览器的后退按钮返回到之前的页面。
历史记录：由于router.push会将新路由添加到历史记录栈中，所以用户可以通过后退按钮回到上一个页面。
使用场景：适合需要记录用户操作历史场景，比如用户在表单填写到一半时，想要返回上一页修改信息。
2. router.replace
功能：router.replace也用于导航到不同的URL，但它不会将新路由添加到浏览器的历史记录栈中。这意味着用户无法通过后退按钮返回到之前的页面。
历史记录：由于不会添加到历史记录栈，router.replace所做的更改会直接替换掉当前的历史记录。
使用场景：适合不需要记录用户操作历史场景，或者当你想要确保用户不能返回到某个页面时。

 

实现一个首页停顿3秒自动跳转：

详细代码在上一篇blog，在home组件的script中加入下面代码

vue之路由https://blog.youkuaiyun.com/weixin_68376171/article/details/135837056?spm=1001.2014.3001.5501

import { onMounted } from 'vue'; 
// 从 Vue 库中导入了 onMounted 生命周期钩子。在 Vue 组件中，可以使用这个钩子来在组件被挂载到 DOM 后执行某些操作。这是一个常用于在组件已挂载时进行数据请求或设置监听器的场景。
import { useRouter } from 'vue-router';
//从 Vue Router 库中导入了 useRouter 钩子。Vue Router 是 Vue.js 的官方路由管理器。useRouter 钩子返回一个 router 对象，可以使用它来导航、获取当前路由等。
  const router =useRouter()
  onMounted(()=>{  //实现延时3秒导航的效果
    setTimeout(()=>{
        router.push('./news')
    },3000)
  })

实现点击查看新闻按钮看内容

<button @click="shownewsdetail(news)">查看新闻</button>

   interface newsInter{ //规范对象属性
       id:string
       title:string
       content:string
    }
    function shownewsdetail(news:newsInter){
      router.push({
        name:'xiang',
        params:{
          id:news.id,
          title:news.title,
          content:news.content
        }
      })
        }

路由重定向：

新增一套路由规则，从根路径修改到/home路径

   {       //新增一个重定向规则，修改默认页面
            path:'/',
            redirect: '/home' 
        }