vue3 |
您所在的位置：网站首页 › 路由跳转时可以使用哪个属性给下个页面传参 › vue3 |
vue3
|
准备工作
下载vue-router，在main.ts中导入并注册如下所示： import App from './App.vue' import router from './router' //以App作为一个参数，创建一个应用实例对象 const app = createApp(App); app.use(router) //挂载到id为app的节点上 app.mount('#app');在src中创建router目录，并在目录下创建文件index.ts,配置路由。如下图和代码所示： 或者 成都 带参数下面这种写法不需要路由匹配参数 成都下面这种写法需要路由匹配参数 成都路由匹配：在router目录下的index.ts中 const router = createRouter({ history: createWebHistory(importa.env.BASE_URL), routes: [ { path: '/category/:id',//或者/category.id name: 'index', component: Category }, ] }) 代码环境 import {useRouter} from 'vue-router'; const router = useRouter(); const goPage = ()=>{ // 字符串路径 router.push('/category') // 带有路径的对象 router.push({ path: '/category' }) // 命名的路由，并加上参数，让路由建立 url router.push({ name: 'category', params: { id: 1 } }) // -> /category?id=1 // 带查询参数，结果是 /category?id=1 router.push({ path: '/category', query: { id: 1 } }) // -> /category?id=1 // 带 hash，结果是 /about#team router.push({ path: '/category', hash: '#team' }) //坑：`params` 不能与 `path` 一起使用,如果提供了 `path`，`params` 会被忽略，上述例子中的 `query` 并不属于这种情况 //注意上下两种写法有细微的差别哈，下面的写法要自己在路由匹配 //路由配置`path:"/home/:id"`或者`path:"/home.id"` const id = 1; // 手动建立 url，但我们必须自己进行路由匹配 router.push(`/category/${id}`) // -> /category/1 // 同样 router.push({ path: `/category/${id}` }) // -> /category/1 // 如果可能的话，使用 `name` 和 `params` 从自动 URL 编码中获益 router.push({ name: 'category', params: { id } }) // -> /category/1 // `params` 不能与 `path` 一起使用 router.push({ path: '/category', params: { id } }) // -> /category }其他导航方式： // 向前移动一条记录，与 router.forward() 相同 router.go(1) // 返回一条记录，与 router.back() 相同 router.go(-1) // 前进 3 条记录 router.go(3) // 如果没有那么多记录，静默失败 router.go(-100) router.go(100) router.replace()的使用方法请参考router.push() 获取参数 路由路径参数----路由匹配参数获取可以是使用props获取参数，但工作中一般不用，这里就不做过多解释，工作中常用的是下面这种形式 例如：/catagory/:id import {ref, onMounted} from 'vue'; import {useRoute} from 'vue-router'; const route = useRoute() const id = ref(null); onMounted(() => { //有params者不能路由使用path，应使用name //params 是 跳转路由是由个人规定的参数对象名，没有一般默认为params id.value = route.params.id; }) 路由查询参数---无路由匹配参数获取例如： /category?id=1 import {ref, onMounted} from 'vue'; import {useRoute} from 'vue-router'; const route = useRoute() const id = ref(null); onMounted(() => { //这里query是由个人规矩的参数对象名 id.value = route.query.id; }) |
【本文地址】
今日新闻 |
推荐新闻 |