来自 Web前端 2020-04-29 17:44 的文章
当前位置: 网上澳门金莎娱乐 > Web前端 > 正文

Vue中在新窗口打开页面及Vue-router的使用_vue.js_脚本之家

router.go(n)

参考文章:Vue Router

注意绝对不能写href="",这样执行click跳转后,又会执行href跳转到当前页面push也可以直接使用path:

以上所述是小编给大家介绍的Vue中在新窗口打开页面及Vue-router的 使用,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

!DOCTYPE htmlhtml lang="en" head meta charset="UTF-8" titleabc/title script src=""/script script src="-router/dist/vue-router.js"/script/head body div  h1Hello App!/h1 !-- 路由出口 -- !-- 路由匹配到的组件将渲染在这里 -- router-view /router-view /div/bodyscript type="text/javascript"// 0. 如果使用模块化机制编程,导入 Vue 和 VueRouter,要调用 Vue.use(VueRouter) // 1. 定义(路由)组件。// 可以从其他文件 import 进来// const Foo = { template: 'div @onclick="pushtest" href=""Go to Bar/a' }// const Bar = { template: 'div @onclick="pushtest" href=""Go to Foo/a' } const Foo = Vue.extend({ template: 'a @click="pushtest" href="javascript:void(0)"Navigate to bar/a', methods: { pushtest() { //alert("bar"); this.$router.push({ name: 'bar' }); //alert("fdas"); }, }, }); const Bar = Vue.extend({ template: 'a @click="pushtest" href="javascript:void(0)"Navigate to foo/a', methods: { pushtest() { //alert("foo"); this.$router.push({ name: 'foo' }); //alert("fdas"); }, },}); // 2. 定义路由// 每个路由应该映射一个组件。 其中"component" 可以是// 通过 Vue.extend() 创建的组件构造器,// 或者,只是一个组件配置对象。// 我们晚点再讨论嵌套路由。const routes = [ { path: '/', redirect: "/bar" }, { path: '/foo', name: "foo", component: Foo }, { path: '/bar', name: "bar", component: Bar }, ] // 3. 创建 router 实例,然后传 `routes` 配置// 你还可以传别的配置参数, 不过先这么简单着吧。const router = new VueRouter({ routes // (缩写)相当于 routes: routes}) // 4. 创建和挂载根实例。// 记得要通过 router 配置参数注入路由,// 从而让整个应用都有路由功能const app = new Vue({ router, // (缩写)相当于 router: router // methods: { // pushtest:function() { // alert("fdas"); // }, // }, watch: { $route(to, from) { //alert(to.path); //document.getElementById("testzy").innerText = this.$route.params.id; } }, }).$mount('#app') // 现在,应用已经启动了!/script /html

3.router.go:这个方法的参数是一个整数,意思是在 history 记录中向前或者后退多少步,类似 window.history.go。

this.$router.push('/foo');

总结

// 在浏览器记录中前进一步,等同于 history.forward()router.go(1)// 后退一步记录,等同于 history.back()router.go(-1)// 前进 3 步记录router.go(3)// 如果 history 记录不够用,那就默默地失败呗router.go(-100)router.go(100)

使用路由对象的resolve方法解析路由,可以得到location、router、href等目标路由的信息。得到href就可以使用window.open开新窗口了。

route-link是在html中静态定义的,也可以在代码中动态跳转:

 const router = new VueRouter({ routes: [ { path: '/a', component: A, alias: '/b' } ] })

push会向history添加一条新记录,此时后退会跳转到前一个组件

•动态路由匹配:一个“路径参数”使用冒号:标记。当匹配到一个路由时,参数值会被设置到this.$route.params,可以在每个组件内使用。

时间: 2019-09-07阅读: 110标签: 跳转

•嵌套路由:要在嵌套的出口中渲染组件,需要在 VueRouter 的参数中使用 children 配置,要注意,以 / 开头的嵌套路径会被当作根路径。 这让你充分的使用嵌套组件而无须设置嵌套的路径。

router.replace(location)跟push功能类似,但是不会向history添加一条新记录,不能后退

// 字符串router.push// 对象router.push// 命名的路由router.push({ name: 'user', params: { userId: 123 }})// 带查询参数,变成 /register?plan=privaterouter.push({ path: 'register', query: { plan: 'private' }})

这个方法的参数是一个整数,意思是在 history 记录中向前或者后退多少步,类似 window.history.go(n)。

•编程式导航

网上澳门金莎娱乐,•重定向和别名

2.别名:/a 的别名是 /b,意味着,当用户访问 /b 时,URL 会保持为 /b,但是路由匹配则为 /a,就像用户访问 /a 一样。

本文由网上澳门金莎娱乐发布于Web前端,转载请注明出处:Vue中在新窗口打开页面及Vue-router的使用_vue.js_脚本之家

关键词: