动态路由的配置

路由配置

  {
    path: '/dynamicRouter/:id',
    name: 'dynamicRouter',
    component: () => import('../views/DynamicRouterView.vue')
  }

跳转到动态路由的方式

使用router-link标签进行跳转

<router-link :to="`/dynamicRouter/${1}`">动态路由</router-link> |
或者下面这种写法，使用对象
<router-link :to="{name:'dynamicRouter',params:{id:2}}">动态路由</router-link>
<router-view/>

使用ts代码useRouter()函数

<script lang="ts" setup>
import { useRouter } from "vue-router"

const router = useRouter();
const handleRouter = () => {
  router.push("/dynamicRouter/"+2);
}
</script>

useRoute & useRouter

const route = useRoute();//route含有路由的信息
const router = useRouter();//router含有路由的操作

导航守卫

router.beforEach(callback)

callback接收三个参数 to:要去的路由名称 from:从哪个路由来 next:函数，接收一个路径，接下来要前往的路由，未传参数则按照默认行为

router.beforeEach((to,from,next) => {
  const store = useStore();
  console.log();
  if(!store.state.user.isLogin && to.name!=='login'){
    next({name:'login'});
  }else{
    next();
  }
})