南昌企业网站开发公司市场推广方式有哪几种
目录
起步，安装
1. 安装
2. 使用
命名路由
编程式导航
1. 字符串模式
2. 对象模式
3. 命名路由模式
历史记录
replace的使用
横跨历史
路由传参
1. query路由传参
2. 动态路由传参
3. 二者的区别
起步，安装
router 路由
因为vue是单页应用不会有那么多html 让我们跳转 所有要使用路由做页面的跳转
Vue 路由允许我们通过不同的 URL 访问不同的内容。通过 Vue 可以实现多视图的单页Web应用
1. 安装
使用Vue3 安装对应的router4版本
使用Vue2安装对应的router3版本
npm install vue-router -s
2. 使用
在src目录下新建router文件夹，新建index.ts文件
import {createRouter,createWebHistory,RouteRecordRaw} from "vue-router";const routes:Array<RouteRecordRaw> = [{path: '/',component: () => import("../components/A.vue")},{path: "/card",component: () => import("../components/Card.vue")}
]const router = createRouter({history: createWebHistory(),routes
})export default router路由数组的类型 RouteRecordRaw
路由模式
-
vue2 mode history vue3 createWebHistory
-
vue2 mode hash vue3 createWebHashHistory
-
vue2 mode abstact vue3 createMemoryHistory
1为history模式，原理是调用h5的history方法，2为hash模式，原理为调用location.hash进行跳转
router-link
请注意，我们没有使用常规的 a 标签，而是使用一个自定义组件 router-link 来创建链接。这使得 Vue Router 可以在不重新加载页面的情况下更改 URL，处理 URL 的生成以及编码。我们将在后面看到如何从这些功能中获益。
通过props to来进行跳转
默认渲染为一个a标签，
<script setup lang='ts'></script><template><h1>app组件</h1><router-link to="/">A组件</router-link><router-link to="/card">Card组件</router-link><router-view></router-view>
</template><style scoped></style>main.ts进行挂载
import { createApp } from 'vue'
import App from './App.vue'
import router from "./router"const app = createApp(App)app.use(router)app.mount('#app')直接通过a href也可以跳转但是会刷新页面
<a href="/reg">rrr</a>
命名路由
除了 path 之外，你还可以为任何路由提供 name。这有以下优点：
- 没有硬编码的 URL
params的自动编码/解码。- 防止你在 url 中出现打字错误。
- 绕过路径排序（如显示一个）
const routes:Array<RouteRecordRaw> = [{path: '/',name: "A",component: () => import("../components/A.vue")},{path: "/card",name: "card",component: () => import("../components/Card.vue")}
]
router-link跳转方式需要改变 变为对象并且有对应name
<router-link :to="{name: 'A'}" style="margin-right: 10px">A组件</router-link><router-link :to="{name: 'card'}">Card组件</router-link>编程式导航
除了使用 <router-link> 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。
1. 字符串模式
<script setup lang='ts'>
import {useRouter} from "vue-router";
const router = useRouter()
function toAny(url:string) {router.push(url)
}
</script><template><h1>app组件</h1>
<!-- <router-link :to="{name: 'A'}" style="margin-right: 10px">A组件</router-link>-->
<!-- <router-link :to="{name: 'card'}">Card组件</router-link>--><button @click="toAny('/')">toA</button><button @click="toAny('/card')">ToCard</button><router-view></router-view>
</template><style scoped></style>2. 对象模式
function toAny(url:string) {router.push({path: url})
}
3. 命名路由模式
function toAny(url:string) {router.push({name: url})
}
历史记录
replace的使用
采用replace进行页面的跳转会同样也会创建渲染新的Vue组件，但是在history中其不会重复保存记录，而是替换原有的vue组件；
router-link的使用方法
<router-link replace :to="{name: 'A'}" style="margin-right: 10px">A组件</router-link><router-link replace :to="{name: 'card'}">Card组件</router-link>编程式导航的用法
function toAny(url:string) {router.replace({name: url})
}
横跨历史
该方法采用一个整数作为参数，表示在历史堆栈中前进或后退多少步
<button @click="next">前进</button><button @click="prev">后退</button>const next = () => {//前进 数量不限于1router.go(1)
}const prev = () => {//后退router.back()
}路由传参
1. query路由传参
编程式导航 使用router push 或者 replace 的时候 改为对象形式新增query 必须传入一个对象
<script setup lang="ts">
import {data} from "./data.json"
import {useRouter} from "vue-router";
const router = useRouter()
type Data = {id: numbername: stringaddress: string
}
function toDetails (item:Data) {router.push({path: "/B",query: item})
}
</script><template><div class="container"><h1>这是内容区域</h1><hr><table class="table"><thead><tr><th>编号</th><th>姓名</th><th>地址</th><th>操作</th></tr></thead><tbody><tr v-for="item in data" :key="item.id"><td>{{item.id}}</td><td>{{item.name}}</td><td>{{item.address}}</td><td><button @click="toDetails(item)">编辑</button></td></tr></tbody></table></div>
</template><style scoped>
.table {width: 50%;border-collapse: collapse;border: 1px solid #ccc;margin: 0 auto;text-align: center;
}
th,td {border: 1px solid grey;
}
</style>接受参数
使用 useRoute 的 query
<script setup generic="T" lang="ts">
import {useRoute,useRouter} from "vue-router";
const route = useRoute()
const router = useRouter()
</script><template>
<div><h1>我是b组件</h1><button @click="router.back()">返回</button><hr><div>姓名：{{route.query.name}}</div><div>地址：{{route.query.address}}</div><div>编号：{{route.query.id}}</div>
</div>
</template><style scoped></style>2. 动态路由传参
很多时候，我们需要将给定匹配模式的路由映射到同一个组件。例如，我们可能有一个 User 组件，它应该对所有用户进行渲染，但用户 ID 不同。在 Vue Router 中，我们可以在路径中使用一个动态字段来实现，我们称之为 路径参数
router/index.ts
{path: "/B/:id",name: "B",component: () => import("../components/B.vue")
}
使用params就必须使用name 的形式
function toDetails (item:Data) {router.push({name: "B",params: {id: item.id}})
}
<script setup generic="T" lang="ts">
import {useRoute,useRouter} from "vue-router";
import {data} from "./data.json"
type Data = {id: numbername: stringaddress: string
}
const route = useRoute()
const router = useRouter()
const item:Data = data.find(v => v.id === Number(route.params.id)) as Data
</script><template>
<div><h1>我是b组件</h1><button @click="router.back()">返回</button><hr><div>姓名：{{item.name}}</div><div>地址：{{item.address}}</div><div>编号：{{route.params.id}}</div>
</div>
</template><style scoped></style>3. 二者的区别
-
query 传参配置的是 path，而 params 传参配置的是name，在 params中配置 path 无效
-
query 在路由配置不需要设置参数，而 params 必须设置
-
query 传递的参数会显示在地址栏中
-
params传参刷新会无效，但是 query 会保存传递过来的值，刷新不变 ;
-
路由配置