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