陕西启康建设有限公司网站,手机wap购物网站模板,网站源码绑定域名处理,app开发企业一般选择路由的基础知识1.路由简介2.路由基本使用3.嵌套路由4.传递路由的query传参# 5.传递路由的params参数6.路由的props传参配置7.路由router-link标签的replace属性8.编程式路由导航9.缓存路由组件1.路由简介
路由是一条条对应的key-value关系#xff0c;key就是前端地址栏的路径…
路由的基础知识1.路由简介2.路由基本使用3.嵌套路由4.传递路由的query传参# 5.传递路由的params参数6.路由的props传参配置7.路由router-link标签的replace属性8.编程式路由导航9.缓存路由组件1.路由简介
路由是一条条对应的key-value关系key就是前端地址栏的路径value就是对应的组件用于展示对应内容路由器统一管理多条路由工作过程当浏览器的地址发生改变时对应的组件就会显示
2.路由基本使用 准备路由组件 //Home组件
templatedivh2我是Home的内容/h2/div
/templatescript
export default {name:HomeCompo
}
/script//About组件
templatedivh2我是About的内容/h2/div
/templatescript
export default { name:AboutCompo
}
/script 创建并保留路由配置文件编写路由规则 //引入路由需要用到的组件
import Home from ../components/Home
import About from ../components/About
//引入路由工具库
import VueRouter from vue-router
//创建并暴露路由
const routernew VueRouter({//配置路由规则routes:[{path:/home,component:Home},{path :/about,component:About}]})
export default router在main.js中挂载路由 import Vue from vue
import App from ./App.vue
// 引入vue-router组件库
import VueRouter from vue-router
//引入路由配置文件
import router from ./routerVue.config.productionTip false
// 使用插件
Vue.use(VueRouter)
new Vue({render: h h(App),router, //挂载路由
}).$mount(#app) 在App.vue中使用 router-link 和router-view标签 放路由的key和 路由的value router-link classlist-group-item active-classactive to/aboutAbout/router-linkrouter-link classlist-group-item active-classactive to/homeHome/router-link!-- 显示路由内容的标签 --router-view/router-view路由的注意事项 路由组件通常存放在pages文件夹一般组件通常存放在components文件夹。通过切换“隐藏”了的路由组件默认是被销毁掉的需要的时候再去挂载。每个组件都有自己的$route属性里面存储着自己的路由信息。整个应用只有一个router可以通过组件的$router属性获取到。 homeRouteaboutRoute false homeRouteraboutRouter true 3.嵌套路由 配置路由规则使用children配置项 routes:[{path:/about,component:About,},{path:/home,component:Home,children:[ //通过children配置子级路由{path:news, //此处一定不要写/newscomponent:News},{path:message,//此处一定不要写/messagecomponent:Message}]}
]跳转要写完整路径 router-link to/home/newsNews/router-link4.传递路由的query传参 有两种query传参方式分别是字符串传参和对象传参 给detail传递参数 !-- 跳转并携带query参数to的字符串写法 --
router-link :to/home/message/detail?id666title你好跳转/router-link!-- 跳转并携带query参数to的对象写法 --
router-link :to{path:/home/message/detail,query:{id:666,title:你好}}
跳转/router-link在detail接受参数 $route.query.id
$route.query.title# 5.传递路由的params参数 有两种params传参方式分别是字符串传参和对象传参 给Deatil组件传递参数 第一步在router.js的配置文件中声明参数的占位符 {path:/home,component:Home,children:[{path:news,component:News},{component:Message,children:[{name:xiangqing,path:detail/:id/:title, //使用占位符声明接收params参数component:Detail}]}]
}第二部跳转并携带参数 !-- params传参的模板字符串写法 --router-link :to/home/message/detail/${m.id}/${m.title}跳转{{m.title}}/router-link!-- params传参的对象写法 --!-- 跳转并携带params参数to的对象写法 --router-link:to{name: xiangqing,//不能使用path配置params: {id: m.id,title: m.title,},}跳转/router-link第三步接受使用参数 $route.params.id
$route.params.title特别注意当使用params传参时若使用to的对象写法则不能使用path配置只能使用name命名路由配置 6.路由的props传参配置 路由的props的出现是为了让路由组件能够更方便的接受参数 props配置有三种写法分别是对象布尔值和函数写法 {name:xiangqing,path:detail/:id,component:Detail,//第一种写法props值为对象该对象中所有的key-value的组合最终都会通过props传给Detail组件// props:{a:900}//第二种写法props值为布尔值布尔值为true则把路由收到的所有params参数通过props传给Detail组件// props:true//第三种写法props值为函数该函数返回的对象中每一组key-value都会通过props传给Detail组件props(route){return {id:route.query.id,title:route.query.title}}
}7.路由router-link标签的replace属性 作用控制路由跳转时操作浏览器历史记录的模式浏览器的历史记录有两种写入方式分别为push和replacepush是追加历史记录入栈replace是替换当前记录先出栈顶元素再入栈。路由跳转时候默认为push如何开启replace模式router-link replace .......News/router-link 8.编程式路由导航 不使用router-link标签进行路由跳转而是使用$router提供的api进行跳转push函数是入栈跳转replace函数是替换跳转 配置对象的写法与router-link to熟悉配置对象的写法一致 //$router的两个API
this.$router.push({name:xiangqing,params:{id:xxx,title:xxx}
})this.$router.replace({name:xiangqing,params:{id:xxx,title:xxx}
})
this.$router.forward() //前进
this.$router.back() //后退
this.$router.go() //可前进也可后退 正数前进几步负数后退几步9.缓存路由组件 当一个路由组件A中出现输入类元素 比如文本框时假如我们从A路由切换到B路由因为路由切换实际上是销毁了路由组件所以之后再重新切回A路由A路由组件的文本框数据已经丢失了。所以我们要对A路由进行缓存缓存的方式是使用keep-alive标签包裹住A组件的显示区域配合include属性使用 include属性值是组件名而不是命名路由的名字 如果想要缓存多个路由组件可写:include[News,Message]
keep-alive includeNews router-view/router-view
/keep-alive
