vue 一些问题便签

1. vue3页面传参

　　方式一　

 <div><router-link :to="/">首页</router-link></div>
    <div><router-link :to="{path:'/news/detail',query:{id:1}}">详情</router-link></div>
    <div><router-link :to="{name:'newsDetail',params:{id:1}}">详情</router-link></div>

　　方式二　

使用path + 路径，query + 参数。则用this.$route.query.id取值。

使用name +路由名称，params + 参数。则用this.$route.params.id取值。

vue2 的写法
this.$router.push({
    name:'Child',
    params:{
        id:123
    }
})

this.$router.push({
    path:'/page',
    query:{
        id:123
    }
})

vue3 写法

跳转页

import { useRouter } from 'vue-router'
const route = useRouter(); 
route.push({'name': 'home', params: {'data':123})

接受页

import { useRouter } from 'vue-router'
const route = useRouter(); 
console.log(route.params)

 

 2 vue3 router 配置路由，重定向

{ path:'/', redirect:'/home' }, // 默认路径重定向至首页
{ path:'/home', name:'home', component: () => import('@/views/Home/index.vue') },

 

3 vue 使用 useRouter 方法返回的对象是undefined

　　注意，使用 useRouter  必须在 setup 里面不然就不会生效。

　　当在外部js使用router 时，直接引入 import router from '@/router' 就可以使用

//  在 外部js
import router from '@/router'
router.push('/login')

// 在setup 里面
import { useRouter } from 'vue-router'
const router = useRouter()
router.push('/login')

 

4. vue 的cookie组件

npm install vue3-cookies --save

在main.js中配置

  // 引入方式1
  // 因为在main.js中我们执行了app.use(VueCookies)，那么vue内部就会为vue对象绑定上cookie
  // 所以我们可以通过proxy.$cookies来操作cookie了
  // proxy相当于vue2中的this
  // import {getCurrentInstance} from 'vue'
  // const {proxy} = getCurrentInstance()

  // 引入方式2
  import { useCookies } from "vue3-cookies";
  const { cookies } = useCookies();

  // 设置cookie
  cookies.set('k2', 'v2', '1h')
  // 获取
  console.log(cookies.get('k2')) // v2