微机做网站的软件冠县网站建设多少钱

当前位置： 首页 > news >正文

微机做网站的软件,冠县网站建设多少钱,学校网站建设管理办法,上海网站建设团队杨浦文章目录 一、路由的基本使用二、路由器的工作模式三、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里就可以怎么写。