vue-router(2.0)

用Vue.js+vue-router创建单页应用是比较简单的。使用Vue.js时，我们就已经把组件组合成一个应用了，当你要把vue-router加进来，只要配置组件和路由映射，然后告诉vue-router在哪里渲染它们。举例：

<!DOCTYPE html>
<html><head><meta charset="utf-8"></head><body><div id="app"><h1>Hello Vue-router!</h1><p><router-link to="/foo">Go to Foo</router-link><router-link to="/bar">Go to Bar</router-link></p><router-view></router-view></div></body><script src="http://cdn.bootcss.com/vue/2.0.0-rc.8/vue.js"></script><script src="http://cdn.bootcss.com/vue-router/2.0.0-rc.7/vue-router.js"></script><script>const Foo = { template: '<div>foo</div>' }const Bar = { template: '<div>bar</div>' }const routes = [{ path: '/foo', component: Foo },{ path: '/bar', component: Bar }]const router = new VueRouter({routes // short for routes: routes
    })const app = new Vue({router}).$mount('#app');</script>
</html>

结果：

动态路由匹配

可以在 vue-router 的路由路径中使用“动态路径参数”

<!DOCTYPE html>
<html><head><meta charset="utf-8"></head><body><div id="app"><h1>Hello Vue-router!</h1><p><router-link to="/foo/first">Go to First</router-link><router-link to="/foo/second">Go to Second</router-link></p><router-view></router-view></div></body><script src="http://cdn.bootcss.com/vue/2.0.0-rc.8/vue.js"></script><script src="http://cdn.bootcss.com/vue-router/2.0.0-rc.7/vue-router.js"></script><script>const Foo = { template: '<div>foo {{ $route.params.id }}</div>' }const routes = [{ path: '/foo/:id', component: Foo },]const router = new VueRouter({routes // short for routes: routes
    })const app = new Vue({router}).$mount('#app');</script>
</html>

结果：

嵌套路由

URL中各段动态路径可以按某种结构对应嵌套各层组件。

例子：

<!DOCTYPE html>
<html><head><meta charset="utf-8"></head><body><div id="app"><p><router-link to="/user/foo">/user</router-link><router-link to="/user/foo/profile">/user/profile</router-link><router-link to="/user/foo/posts">/user/posts</router-link></p><router-view></router-view></div></body><script src="http://cdn.bootcss.com/vue/2.0.0-rc.8/vue.js"></script><script src="http://cdn.bootcss.com/vue-router/2.0.0-rc.7/vue-router.js"></script><script>const User = {template:`<div class="user"><h2>User {{ $route.params.id }}</h2><router-view></router-view></div>
      `}const UserHome = { template: '<div>Home</div>' }const UserProfile = { template: '<div>Profile</div>' }const UserPosts = { template: '<div>Posts</div>' }const router = new VueRouter({routes: [{ path: '/user/:id', component: User,children: [{ path: '', component: UserHome },{ path: 'profile', component: UserProfile },{ path: 'posts', component: UserPosts }]}]});const app = new Vue({ router }).$mount('#app');</script>
</html>

结果：

转载于:https://www.cnblogs.com/wj204/p/5938066.html

vue-router(2.0)相关推荐

Vue Router 4.0 正式发布！焕然一新。
关注若川视野,回复"pdf" 领取资料,回复"加群",可加群长期交流学习 12月8日,Vue Router 4 正式发布稳定版本. 在经历了 14 个 Alph ...
注意避坑，Vue Router 4: 路由参数在 created/setup 时不可用
有梦想,有干货,微信搜索 [大迁世界] 关注这个在凌晨还在刷碗的刷碗智. 本文 GitHub https://github.com/qq449245884/xiaozhi 已收录,有一线大厂面试完整考 ...
Vue Router 4 的使用，一篇文章给你讲透彻
Vue 3.X 使用Vue Router 4.x 进行路由配置,本文我们就来研究下如何使用Vue Router 4.x,本文中所有的使用方式都是使用 Composition API的方式. 本文通过一 ...
Vue.js 从 Vue Router 0.7.x 迁移
从 Vue Router 0.7.x 迁移只有 Vue Router 2 是与 Vue 2 相互兼容的,所以如果你更新了 Vue ,你也需要更新 Vue Router .这也是我们在主文档中将迁移路 ...
Vue 2.0 + Vue Router + Vuex 后台管理系统的骨架
https://github.com/helloyoucan/ba 用 Vue.js 2.x 与相配套的 Vue Router.Vuex 搭建了一个最基本的后台管理系统的骨架. 当然先要安装 node ...
Vue this.$router.go(0) 刷新当前页面在苹果手机无效
this.router.go(0) 和 window.location.reload() 都是刷新当前页面的方法 Vue 写H5页面时,用 this.$router.go(0); 方法刷新当前页面,在 ...
Vue.js 3.0 学习笔记（十一）Vue Router路由
一.使用Vue Router 1.HTML页面使用路由 <!DOCTYPE html> <html> <head><meta charset="UT ...
从 Vue Router 0.7.x 迁移
从 Vue Router 0.7.x 迁移只有 Vue Router 2 是与 Vue 2 相互兼容的,所以如果你更新了 Vue ,你也需要更新 Vue Router .这也是我们在主文档中将迁移路 ...
你可能不清楚的 Vue Router 深度用法（二）
此为 Vue Router 深度用法的第二篇,主要讲述动态路由匹配用法.第一篇的链接在此: https://segmentfault.com/a/11... 动态路由匹配是用于把某种模式匹配到的所有路 ...
vue router 参数_Vue.js项目开发技术解析
Vue.js项目开发技术解析一.Vue.js实例在一个Vue.js工程中,用于显示内容最基层的实例称之为根实例.通过该实例可以进行页面或组件的更新和显示.对于项目本身而言,无论是什么样的页面,都要 ...

vue-router(2.0)

动态路由匹配

嵌套路由

vue-router(2.0)相关推荐

最新文章

热门文章