vue学习：7、路由跳转

2019独角兽企业重金招聘Python工程师标准>>>

    <body><div id="app"></div></body><script type="text/javascript">var Login = {template: `<div>我是登陆界面</div>`};var Register = {template: `<div>我是注册界面</div>`};<!-- 2：按照插件 -->Vue.use(VueRouter);<!-- 3：创建路由对象 -->var router = new VueRouter({<!-- 4：配置路由对象 -->routes: [{ name:'login',   path: '/login',       component: Login}, { name:'register', path: '/register',    component: Register }]});<!-- 6：指定路由改变局部的位置 -->var App = {template: `<div><!-- vue-router内置组件 --><!-- <router-link to="/login">登录去</router-link><router-link to="/register">注册去</router-link> --><!-- to 前没有冒号 就字符串处理了 --><router-link :to="{name:'login'}">登录去</router-link><router-link :to="{name:'register'}">注册去</router-link><!-- 显示跳转页面 --><router-view></router-view></div>`}new Vue({el: '#app',router: router,components: {app: App},template: '<app/>'})</script>

传参与嵌套

    <body><div id="app"></div></body><script type="text/javascript">// 1: router-view 中包含 router-view// 2: 路由规则中存在子路由var Login = {template: `<div>这里是Login界面,下面是子界面<hr><!-- 显示跳转页面 --><router-view></router-view></div>`,created: function() {console.log(this.$route.query);console.log(this.$route.query.id + ' ' + this.$route.query.name);}};var Register = {template: `<div>我是注册界面</div>`,created: function() {console.log(this.$route.params);console.log(this.$route.params.name);}};var Woman={template:`<div>女的</div>`}var Man={template:`<div>男的</div>`}var Boy={template:`<div>小屁孩</div>`}<!-- 2：按照插件 -->Vue.use(VueRouter);<!-- 3：创建路由对象 -->var router = new VueRouter({<!-- 4：配置路由对象 -->routes: [{<!--保证 /login 显示login组件  -->name: 'login',path: '/login',component: Login,<!-- 保证/login/abc 显示abc -->children:[{name: 'login.woman',path: 'woman',component: Woman},{name: 'login.man',path: 'man',component: Man},{name: 'login.boy',path: 'boy',component: Boy}]},{name: 'register',path: '/register/:name',component: Register}]});<!-- 6：指定路由改变局部的位置 -->var App = {template: `<div><!-- vue-router内置组件 --><!-- <router-link to="/login">登录去</router-link><router-link to="/register">注册去</router-link> --><!-- to 前没有冒号 就字符串处理了  --><!-- query:{id:1} --><!-- params:{name:'abc'} --><router-link :to="{name:'login.woman'}" >女</router-link><router-link :to="{name:'login.man'}" >男</router-link><router-link :to="{name:'login.boy'}" >小屁孩</router-link><router-link :to="{name:'login',query:{id:1,name:'ddd'}}" >登录去</router-link><router-link :to="{name:'register',params:{name:'abc'}} "  >注册去</router-link><!-- 显示跳转页面 --><router-view></router-view></div>`}new Vue({el: '#app',router: router,components: {app: App},template: '<app/>'})</script>

转载于:https://my.oschina.net/qingqingdego/blog/2873891

vue学习：7、路由跳转相关推荐

Vue学习之路由(Router)
Vue学习之路由(Router) 文章目录 Vue学习之路由(Router) 一.路由是什么? 二.Vue Router的安装 1.直接下载/CDN 2.NPM安装三.路由的基础使用 1.定义路 ...
解决vue单页路由跳转后scrollTop的问题
作为vue的初级使用者,在开发过程中遇到的坑太多了.在看页面的时候发现了页面滚动的问题,当一个页面滚动了,点击页面上的路由调到下一个页面时,跳转后的页面也是滚动的,滚动条并不是在页面的顶部在我们写路 ...
Vue导航点击路由跳转后样式不变
Vue导航点击路由跳转后样式不变 <template><ul><li :class="{active:isActive==1}" @click=&qu ...
解决 VUE 微信 IOS 路由跳转问题
解决 VUE 微信 IOS 路由跳转问题参考文章: (1)解决 VUE 微信 IOS 路由跳转问题 (2)https://www.cnblogs.com/taoquns/p/9713846.html ...
vue中实现路由跳转的三种方式（超详细整理）
vue中实现路由跳转的三种方式一.使用vue-router vue-router 本质是一个第三方的包用的时候需要下载步骤 (7步法 ): 下载vue-router模块到当前工程 yarn ad ...
vue实现登录路由跳转到成功页面
一. 效果 1.未登陆之前 2.登录界面 3.登录之后路由跳转二.需求分析要求: 使用vue-cli搭建创建项目密码输入框有两个功能,当用户输入时候如果坚持caps lock处于开启状态. ...
vue路由跳转权限_如何在vue中实现路由跳转判断用户权限功能？
实现这类校验有几个步骤. 1.设置路由是否需要校验的阀值. // 路由配置的地方谁知阀值 routes:[ { name:'admin', path:'/admin', component:'..., ...
创建vue项目(三)路由跳转、反向代理、本地存储、状态管理
数据更新渲染,axios请求数据,配置环境一.路由跳转 app.vue <template><div id="app"><keep-alive> ...
vue中的路由跳转和传参
一:注意:在 Vue 实例中,你可以通过 $router 访问路由实例.因此你可以调用 this.$router.push("路由地址")来跳转到目标路由页面: 想要导航到不同的 ...
vue --- Vue中的路由跳转问题
import Vue from 'vue' import Router from 'vue-router' // 前2个导入时vue框架自带的 import SayHi from '@/compone ...

vue学习：7、路由跳转

vue学习：7、路由跳转相关推荐

最新文章

热门文章