南通网站,用asp.net做网站计数器,在线上传图片生成链接,天华集团设计公司vue-router编程式导航 在vue项目中经常用到this.$router.push() 和 this.$router.replace() 方法进行路由跳转就是编程式导航。。。
通俗理解编程式导航#xff1a;通过操作$router实例的JavaScript代码实现路由跳转。点击 router-link :to... 等同于调用…vue-router编程式导航 在vue项目中经常用到this.$router.push() 和 this.$router.replace() 方法进行路由跳转就是编程式导航。。。
通俗理解编程式导航通过操作$router实例的JavaScript代码实现路由跳转。点击 router-link :to... 等同于调用 router.push(...)。$router实例的方法有push()、replace()、go()方法也可以进行路由传参。
先上代码简单入手看效果 demo基于vue-cli创建的项目结构如图 第一步定义路由文件 router index.js如下
import Vue from vue
import Router from vue-router
import HelloWorld from /components/HelloWorldimport home from /components/Home //引入组件Vue.use(Router)export default new Router({routes: [{path: /,name: HelloWorld,component: HelloWorld},{path: /home, //可以定义路由路径、命名、组件、参数、别名、重定向name: home,component: home}, ]
})第二步helloWorld页面使用声明式和编程式导航到home组件的按钮helloWorld组件如下
templatediv classhelloh1{{ msg }} 页面/h1router-link to/home声明式使用router-link路由导航到home页面/router-linkbrbutton clickpushToHome()js编程式push方法导航到home页面/buttonbutton clickreplaceToHome()js编程式replace方法导航到home页面/buttonbrbutton clickgoNext()js编程式go方法导航到history记录的下一个页面/buttonrouter-view/router-view/div
/templatescript
export default {name: HelloWorld,data () {return {msg: Welcome to HelloWorld }},methods:{pushToHome:function(){this.$router.push(/home,function(){ //push()方法的使用包括导航成功或失败的回调函数console.log(导航成功的回调函数);},function(){console.log(导航中止的回调函数);}); },replaceToHome:function(){ //replace()方法的使用this.$router.replace(/home); },goNext:function(){ //go()方法的使用this.$router.go(1); }}
}
/script!-- Add scoped attribute to limit CSS to this component only --
style scoped
button {margin:10px;
}
/style第三步骤页面home组件中可以使用router.go(-1) 返回到上一个历史记录中的页面无记录时点击无效。home组件如下
templatediv classhelloh1{{ msg }}/h1button clickgoBack()js编程式go方法返回history页面/button/div
/templatescript
export default {name: Home,data () {return {msg: Welcome to Home 主页!!!! }},methods:{goBack:function(){this.$router.go(-1); }}
}
/scriptstyle scoped
h1, h2 {color:red;
}
/stylerouter.push(location, onComplete, onAbort)方法
1、router.push() 方法参数分别指的是导航到 新的url、导肮完成的回调函数、导航中止的回调函数
2、router.push() 方法 会向history栈添加一个新的记录 所以当用户点击浏览器后退按钮时则回到之前的 URL。
3、router.push(location)方法使用
//使用路由的path值
this.$router.push(/router1);//使用包含路由path键值的对象
this.$router.push({path:/router1});//使用包含路由name键值的对象
this.$router.push({name:routerNum1});//使用包含name键值和params参数对象的对象
//注意该方式params传参浏览器页面不在url中显示参数但是会页面刷新的时候丢失参数
this.$router.push({name:routerNum1,params:{userId:123}}); //path键值结合params的形式传参无效
this.$router.push({path:/router1,params:{userId:123}});//可以使用path键值结合query的形式传参
this.$router.push({path:/router1,query:{userId:123}});//使用path值拼接参数来传参注意这里使用的不是单引号
const userId123;
this.$router.push({path:/router1/${userId}}); 4、 push()编程式导航注意点
const userId 1231、router.push({ path: /router1/${userId} }) // 注意使用反引号2、router.push({ path: /router1, params: { userId }}) // 注意path键值结合params传参无效3、router.push({ name: /routerNum1, params: { userId }}) // 注意该方式在浏览器url不显示参数但是页面刷新会导致参数丢失 4、小demo使用验证如下
第一步定义路由文件 router index.js如下
import Vue from vue
import Router from vue-router
import HelloWorld from /components/HelloWorldimport home from /components/Home
import router1 from /components/Router1
import router2 from /components/Router2Vue.use(Router)export default new Router({routes: [{path: /,name: HelloWorld,component: HelloWorld},{path: /home, name: home,component: home},{path: /router1,name: routerNum1,component: router1},{path: /router2,name: routerNum2,component: router2}, ]
})第二步home.vue组件文件代码如下。
templatediv classhelloh3{{ msg }}/h3button clickgoBack()js编程式go方法返回history页面/buttonhrh3js编程式导航中push方法的使用/h3button clickpathTo()push方法的url参数使用path值导航/buttonbutton clickpathObjectTo()push方法的url参数使用path对象导航/buttonbrbutton clicknameObjectTo()push方法,包含路由命名name键值的对象导航/buttonbrbutton clicknameParamTo()push方法,包含路由命名name键值的对象结合params传参/buttonbrbutton clickpathParamTo()push方法,path键值对象导航结合params传参参数传递失败/buttonbutton clickpathQueryTo()push方法,path键值对象导航结合query传参/buttonbrbutton clickpathandTo()push方法,path值拼接参数来传参/button/div
/templatescript
export default {name: Home,data () {return {msg: Welcome to Home 主页!!!! }},methods:{goBack:function(){this.$router.go(-1); },pathTo:function(){ //使用路由的path值this.$router.push(/router1);},pathObjectTo:function(){ //使用包含路由path键值的对象this.$router.push({path:/router1});},nameObjectTo:function(){ //使用包含路由name键值的对象this.$router.push({name:routerNum1});},nameParamTo:function(){ //使用包含name键值和params参数对象的对象this.$router.push({name:routerNum1,params:{userId:123}}); },pathParamTo:function(){ //path键值结合params的形式传参无效this.$router.push({path:/router1,params:{userId:123}}); },pathQueryTo:function(){ //可以使用path键值结合query的形式传参this.$router.push({path:/router1,query:{userId:123}}); },pathandTo:function(){const userId123;this.$router.push({path:/router1/${userId}}); }}
}
/scriptstyle scoped
h1, h2 {color:red;
}
/style第三步router1.vue组件代码如下使用this.$route.params.paramName或query.queryName接收路由传的参数。
templatediv classhelloh3{{ msg }}/h3button clickgoBack()js编程式go方法上一个路由页面/buttonp{{fromRouterParams}}/pp{{fromRouterQuery}}/p/div
/templatescript
export default {name: Router1,data () {return {msg: Welcome to Router1 ,fromRouterParams:this.$route.params.userId,fromRouterQuery:this.$route.query.userId,}},methods:{goBack:function(){this.$router.go(-1); },}
}
/scriptstyle scoped
h1, h2 {color:red;
}
/stylerouter.replace(location, onComplete, onAbort)方法
跟 router.push 很像唯一的不同就是它不会向 history 添加新记录而是跟它的方法名一样 —— 替换掉当前的 history 记录 router.go(n)方法
1、参数是一个整数意思是在 history 记录中向前或者后退多少步类似 window.history.go(n)。 Browser History APIs点击了解更多
2、使用
// 在浏览器记录中前进一步等同于 history.forward()
router.go(1)// 后退一步记录等同于 history.back()
router.go(-1)// 前进 3 步记录
router.go(3)// 如果 history 记录不够用那就默默地失败呗
router.go(-100)
router.go(100)
Vue Router 的导航方法 (push、 replace、 go) 在各类路由模式 (history、 hash 和 abstract) 下表现一致。 路由重定向
路由配置{ path: /a, redirect: /b },路由重定向是指当用户访问 /a时路由跳转到b路由URL 将会被替换成 /b
1、在路由配置文件 router index.js上使用
const router new VueRouter({routes: [{ path: /router1, redirect: /router2 }, //是从 /route1 重定向到 /router2{ path: /b, redirect: {name:foo} }, //重定向的目标也可以是一个命名的路由{ path: /c, redirect:(to){// 方法接收 目标路由 作为参数// return 重定向的 字符串路径/路径对象//注意导航守卫应用在导航跳转目标to上}},]
})
2、注意在给路由设置有路由重定向时再使用的路由导航会应用在跳转to指向的路由上如下路由router1上的导航守卫无效 {path: /router1,redirect: /router2,name: routerNum1,component: router1,beforeEnter:(from,to,next){ //导航守卫无效console.log(在路由1上进行重定向); next();}},{path: /router2,name: routerNum2,component: router2,beforeEnter:(from,to,next){console.log(进入到了路由2);next();}},
3、重定向指向自身会报错[Vue warn]: Error in beforeCreate hook: RangeError: Maximum call stack size exceeded使用动态路径参数传参除外 路由别名
路由别名可以理解为路由的 小名可以使用路由别名进行路由导航
路由 /router2 的别名 alias 为 /secondRouter 那么使用别名访问 /secondRouter 时url是/secondRouter导航跳转到路由 /router2 如下 {path: /router2, name: routerNum2, alias:/secondRouter,component: router2 }, 动态路由匹配
使用情况
1、如果导航目的地和当前路由相同只有参数发生了改变 (比如从一个用户资料到另一个 /users/1 - /users/2)需要组件复用组件复用意味着组件的生命周期钩子函数不会被调用
2、或者所有路由映射到同一个组件模式渲染只是参数不同时。那么我们可以在 vue-router 的路由路径中使用“动态路径参数”(dynamic segment) 来达到这个效果
动态路径参数的使用
第一步动态路径参数的使用需要在路由配置文件上使用冒号开头的形式 {//动态路径参数的使用 冒号开头//那么像/router1/1 和/router1/2都将跳转到该路由页面path: /router1/:userNum, name: routerNum1,component: router1,},
第二步使用this.$router.push({path: /router1/${userNum1} }); 形式进行动态路径传参注意反引号url中的参数不会刷新丢失
templatediv classhelloh3{{ msg }}/h3button clickgoBack()js编程式go方法返回history页面/buttonhrh3js动态路由匹配的使用/h3button clickpathParam1To()动态路径参数1导航/buttonbutton clickpathParam2To()动态路径参数2导航/buttonhrbutton clickdiffParamsTo()导航到当前组件(组件复用)但传递的参数不同/button/div
/templatescript
export default {name: Home,data () {return {msg: Welcome to Home 主页!!!! }},watch: {$route (to, from) {// 对路由变化作出响应...console.log(路由发生变化);console.log(this.$route.params.userNum);}},methods:{goBack:function(){this.$router.go(-1); },pathParam1To:function(){let userNum1111111;this.$router.push({path:/router1/${userNum1}}); },pathParam2To:function(){let userNum2222222;this.$router.push({path:/router1/${userNum2}}); },diffParamsTo:function(){let userNum2666;this.$router.push({path:/router1/${userNum2}}); },}
}
/scriptstyle scoped
h1, h2 {color:red;
}
/style第三步可以在路由组件中使用this.$route.params获取动态路径参数如下
p{{this.$route.params.userNum}}/p 组件复用
复用组件时想对路由参数的变化作出响应的话你可以简单地 watch (监测变化) $route 对象 watch: {$route (to, from) {// 对路由变化作出响应...console.log(路由发生变化);console.log(this.$route.params.userNum);}},
也可以使用2.2中引入的 beforeRouteUpdate导航守卫来响应这个变化 (比如抓取用户信息)。组件内导航守卫可以点击了解
const User {template: ...,beforeRouteUpdate (to, from, next) {// react to route changes...// dont forget to call next()}
} 嵌套路由 嵌套路由指的是在渲染的路由组件页面中包含了下级路由渲染出口router-view浏览器的URL 中各段动态路径也按某种结构对应嵌套的各层组件
在项目的app.vue 文件中router-view是最顶层的出口渲染最高级路由匹配到的组件。
div idapprouter-view/router-view
/div
第一步定义路由配置文件router index.js在路由上使用children属性定义下级路由
import Vue from vue
import Router from vue-router
import helloWorld from /components/HelloWorld
import home from /components/Home
import book from /components/Book
import water from /components/WaterVue.use(Router)
export default new Router({routes: [{path: /,component:helloWorld},{path: /home,component: home,children:[{path:, //当访问的子路由路径无匹配时会指向到该空的子路由component:water,},{path:book,component:book,},{path:water,component:water,},]},]
})第二步路由组件home.vue的内容子路由导航包括了声明式和编程式导航
templatediv classhelloh3{{msg}}/h3button clickshowBookRouter()点击按钮显示子路由页面book/buttonbutton clickshowWaterRouter()点击按钮显示子路由页面water/buttonbrrouter-link to/home/bookbook/router-linkrouter-link to/home/waterwater/router-linkrouter-link to/home/foo/router-linkrouter-view/router-view/div
/templatescript
export default {name: Home,data () {return {msg: Welcome to Home }},methods:{showBookRouter:function(){this.$router.push(/home/book); //编程式路由导航},showWaterRouter:function(){this.$router.push(/home/water);},}
}
/script!-- Add scoped attribute to limit CSS to this component only --
style scoped
h3 {color:red;
}
/style第三步子组件book.vue 和water.book这里就不写了 命名视图
同时 (同级) 展示多个视图而不是嵌套展示例如创建一个布局有 sidebar (侧导航) 和 main (主内容) 两个视图这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图而不是只有一个单独的出口。如果 router-view 没有设置名字那么默认为 default。
router-view classview one/router-view
router-view classview two namea/router-view
router-view classview three nameb/router-view
一个视图使用一个组件渲染因此对于同个路由多个视图就需要多个组件。确保正确使用 components配置 (带上 s) {path: /,components: {default: water,a: book,b: water}}参考网址官网API https://router.vuejs.org/zh/guide/essentials/navigation.html
