东莞网站建设 胶粘包装材料,蘑菇街网站怎么做,网站免费正能量软件下载,苏州集团网站设计公司文章目录 一、路由的基本使用二、路由器的工作模式三、RouterLink中to的两种写法四、嵌套路由五、路由传参1. query传参2. params传参 六、路由的propos配置七、编程式路由导航 一、路由的基本使用 安装#xff1a;npm i vue-router 在src/pages文件下#xff0c;创建三个路… 文章目录 一、路由的基本使用二、路由器的工作模式三、RouterLink中to的两种写法四、嵌套路由五、路由传参1. query传参2. params传参 六、路由的propos配置七、编程式路由导航 一、路由的基本使用 安装npm i vue-router 在src/pages文件下创建三个路由组件(Home\About\News,具体内容不写了) 创建路由器(src/routers/index.ts) // 创建一个路由器并暴露出去
// 1. 引入createRouter
import { createRouter,createWebHistory } from vue-router;// 2. 引入路由组件
import Home from ../pages/Home.vue
import About from ../pages/About.vue
import News from ../pages/News.vue// 3. 创建一个路由器
const router createRouter({history:createWebHistory(), // 必须指定路由工作模式routes:[// 重定向不加重定向会报警告 No match found for location with path /{path:/,redirect:/home},// 通过name属性给路由命名{name:/shouye,path:/home,component:Home},{name:xinwen,path:/news,component:News},{name:guanyu,path:/about,component:About}]
})
export default routermain.ts中引入路由器 // 引入createApp用于创建应用
import { createApp } from vue
// 引入App根组件
import App from ./App.vue
// 引入路由器
import router from ./router
// 创建一个应用
const app createApp(App)
// 使用路由器
app.use(router)
// 挂载整个应用到app容器中
app.mount(#app)App组件中使用路由组件 RouterLink和RouterView的作用与vue2中的router-link,router-view的作用一样。 active-class绑定组件激活时的样式。当组件激活时active的样式还是要自己写会自动添加样式active templatediv classapph2 classtitleVue路由测试/h2!-- 导航区 --div classnavigateRouterLink to/home active-classactive首页/RouterLinkRouterLink to/news active-classactive新闻/RouterLinkRouterLink to/about active-classactive关于/RouterLink/div!-- 展示区 --div classmain-contentRouterView/RouterView/div/div
/template
script langts setup nameApp
import { RouterLink, RouterView } from vue-router
/script
style.navigate a.active {background-color: #64967E;color: #ffc268;font-weight: 900;text-shadow: 0 0 1px black;font-family: 微软雅黑;
}
/style路由组件通常存放在pages 或 views文件夹一般组件通常存放在components文件夹。点击首页首页组件挂载展示首页组件内容。再点击新闻新闻组件挂载并显示该组件内容。首页组件则默认被卸载(onUnmounted)重定向 将特定的路径重新定向到已有路由。否则页面一打开路径是/不对应任何路由组件页面会空白通过name属性给路由命名 二、路由器的工作模式
与vue2中的工作模式一样就是设置模式的方式不一样Vue(十三) 路由器的两种工作模式 history模式 优点URL更加美观不带有#。 缺点后期项目上线需要服务端配合处理路径问题否则刷新会有404错误。 const router createRouter({history:createWebHistory(), //history模式/******/
})hash模式 优点兼容性更好因为不需要服务器端处理路径。 缺点URL带有#不太美观且在SEO优化方面相对较差。 const router createRouter({history:createWebHashHistory(), //hash模式/******/
})三、RouterLink中to的两种写法
!-- 字符串写法 --
RouterLink to/about active-classactive关于/RouterLink
!-- 对象写法 --
RouterLink :to{ path: /about } active-classactive关于/RouterLink
RouterLink :to{ name: /guanyu } active-classactive关于/RouterLink四、嵌套路由 创建路由组件 Detail.vue配置路由规则 src/router/index.ts {name:xinwen,path:/news,component:News,children:[{name:xiangqingpath:detail, // 注意这里不用加/component:Detail}]},News组件
template!-- 新闻 --div classnewsulli v-for n in news :keyn.idRouterLink :to/news/detail{{ n.title }}/RouterLink/li/ul!-- 展示区 --div classnews-contentRouterView/RouterView/div/div
/template五、路由传参
无论点击展示区的哪个title右边详情区的内容应该展示对应的信息。
1. query传参
传参的两种形式
!--src/pages/News.vue--
ulli v-for n in news :keyn.id!-- 第一种字符串用?拼接query参数 --RouterLink :to/news/detail?id${n.id}title${n.title}content${n.content}{{ n.title }}/RouterLink!-- 第二种对象写法 --RouterLink :to{path: /news/detail,query: {id: n.id,title: n.title,content: n.content}}{{ n.title }}/RouterLink/li
/ulDetail组件接收参数
templateul classnews-listli编号:{{ query.id }}/lili标题:{{ query.title }}/lili内容:{{ query.content }}/li/ul
/template
script setup langts nameAboutimport { useRoute } from vue-routerimport { toRefs } from vue// 获取route信息let route useRoute()console.log(route);// 解构出来不是响应式数据需要通过toRefs将其转为响应式数据let { query } toRefs(route)
/script可以看出route是个响应式数据
2. params传参
(1). 传递参数 params传参的两种写法
ulli v-for n in news :keyn.id!-- 第一种,字符串 --RouterLink :to/news/detail/${n.id}/${n.title}/${n.content}{{ n.title }}/RouterLink !-- 第二种, 对象写法,注意不可用path需要用name属性指定路由 --RouterLink :to{name: xiangqing,params: {id: n.id,title: n.title,content: n.content}}{{ n.title }}/RouterLink/li
/ul需要提前占位因为params参数属于路径的一部分。如果没占位假设路径为/news/detail/123/title/content路由中没有这样的路径就会报错。 {name:xinwen,path:/news,component:News,children:[{name:xiangqing,path:detail/:id/:title/:content?,component:Detail}]},?表示content这个参数可传可不传。
(2). 读取参数 注意点1传递params参数时若使用to的对象写法必须使用name配置项不能用path。 注意点2传递params参数时需要提前在规则中占位。 六、路由的propos配置
这个在vue2中也说过。 propos属性的作用是少写重复项让路由组件更方便的接收到参数。 Vue(十三) 路由器的propos配置
(1) 写法一: props:true, {name:xinwen,path:/news,component:News,children:[{name:xiangqing,path:detail/:id/:title/:content?,component:Detail,// 第一种写法,将路由收到的所有params参数传递给Detail组件.props:true,}]},只适用于params参数propstrue时相当于这样传递参数 Detail idxxx titlexxx contentxxx
(2) 写法二:函数式写法 children:[{name:xiangqing,path:detail,component:Detail,// 第二种写法,函数写法,传递params参数或者props参数props(route){return route.query}}](3) 写法三:固定值不推荐 props:{id:123,title:tom,content:tom and jerry}七、编程式路由导航
路由组件的两个重要的属性$route和$router变成了两个hooks。
import { useRouter } from vue-router
let router useRouter()
// pushAPI追加历史记录router.push({name: xiangqing,query: {id: n.id,title: n.title,content: n.content}})// replace替换当前历史记录router.replace({... })push里的值可声明式导航RouterLink里的to属性值一致。to的值可以怎么写push等API里就可以怎么写。
