首页 > 其他分享 >vue route路由使用

vue route路由使用

时间:2022-09-29 20:24:58浏览次数:49  
标签:vue jia route user path push router 路由

<router-link to="/home">home</router-link>
<router-link :to="{ name: 'user', params: { userId: '123' }}">user</router-link>
<router-link :to="{ path: '/user', query: { userId: '123' }}">user</router-link>
<!-- 加入replace不生成记录 -->
<router-link to="/abc" replace>abc</router-link>
router.push('/user/jia')
router.push(`add/${id}`)
router.push({ path: '/user/jia' })
// 通过params传参,不会显示在path上,页面刷新数据会丢失
router.push({ name: 'user', params: { username: 'jia' } })
route.params.username // 获取
// 通过query传参,会显示在path上,页面刷新数据不丢失
router.push({ path: '/register', query: { username: 'jia' } })
route.query // 获取
// replace类似
router.go()

标签:vue,jia,route,user,path,push,router,路由
From: https://www.cnblogs.com/jia-zq/p/16742909.html

相关文章

  • vue computed传参
    通过不同的数据,计算属性返回不同的结果,就需要给计算属性传参,通过返回一个带参数的箭头函数,可以实现计算属性传参computed:{//计算属性computedData(){//......
  • vue2转vite判断当前运行环境
    vue2转vite判断当前运行环境vue2判断当前运行环境使用的是process.env.NODE_ENV==='development',而当转为vite项目时,process会报错,这里环境的判断应该改为import.meta.......
  • 【Vue项目实践】套用github 上的项目(vue3 + Element Plus)运行 可编辑表格
    在Vue3+ElementPlus中生成动态表格gitclonehttps://github.com/kalacloudCode/how-to-build-dynamic-table-in-vue-element-plus.git参考博客:vue3+ElementPlus......
  • 【Vue项目实践】(vue3 + Element Plus)excel 导出
    安装依赖yarnadd--savexlsxfile-saver1、添加导出按钮以及点击事件<el-buttontype="primary"round@click="exportClick">导出表格</el-button>2、在table表格中添加......
  • vue3 pc端页面全屏
    先看效果图: 附上代码: <template><el-button@click="hand">{{fullscreen?'取消全屏':'点击全屏'}}</el-button></template><script>import{ref}......
  • mac解决~/.vuerc may be outdated. Please delete it and re-run vue-cli in manual m
    mac在使用vue-cli创建项目的时候,会出现这个错误 ERROR ~/.vuercmaybeoutdated.Pleasedeleteitandre-runvue-cliinmanualmode.   这是在~/下面有一个......
  • vue引入图片的方式
    一、img标签1、静态引入(静态路径加载)相对路径<imgclass="pic-404__childleft"src="../../assets/404_images/404_cloud.png"alt="404">绝对路径<imgclass......
  • Vue 超长列表渲染性能优化
    参考:https://juejin.cn/post/6979865534166728711#heading-3组件懒加载参考:https://github.com/xunleif2e/vue-lazy-component......
  • Ant Design Vue 在表格中插入图片
    这两天一直在用Antdv做一些小demo,今天在做表格的时候想在表格中插入图片,简单翻了下文档和国内的博客,发现所有的方法竟然都不好使,最后还是在官网的示例代码中看到相关的......
  • vue3 在setup 使用provide inject 实现响应式传值
    provide与inject主要用于从父组件向子组件传递数据。在2.0我们通常用props接收来自父组件的参数,但是一个要从父子组件传递到孙子组件,这种情况就得从父组件到子组件,再从子......