锡盟本地网站建设,小学网站建设方案书,网页特效大全,网络app推广公司vue的路由-vue router一、路由的基本使用HTMLrouter-linkrouter-viewJavaScript二、带参数的动态路由匹配三、嵌套路由四. 编程式导航导航到不同的位置替换当前位置横跨历史篡改历史五. 命名路由六. 命名视图嵌套命名视图七. 重定向和别名重定向别名八. 将 props 传递给路由组件…
vue的路由-vue router一、路由的基本使用HTMLrouter-linkrouter-viewJavaScript二、带参数的动态路由匹配三、嵌套路由四. 编程式导航导航到不同的位置替换当前位置横跨历史篡改历史五. 命名路由六. 命名视图嵌套命名视图七. 重定向和别名重定向别名八. 将 props 传递给路由组件布尔模式命名视图对象模式函数模式九. 不同的历史模式一、路由的基本使用
用 Vue Vue Router 创建单页应用非常简单通过 Vue.js我们已经用组件组成了我们的应用。当加入 Vue Router 时需要做的就是将我们的组件映射到路由上让 Vue Router 知道在哪里渲染它们。
HTML
div idapph1Hello App!/h1p!--使用 router-link 组件进行导航 --!--通过传递 to 来指定链接相当于 href --!-- router-link 将呈现一个带有正确 href 属性的 a 标签 --router-link to/首页/router-linkrouter-link to/aboutAbout组件/router-link/p!-- 路由出口路由匹配到的组件将渲染在这里 --router-view/router-view
/divrouter-link
没有使用常规的 a 标签而是使用一个自定义组件 router-link 来创建链接。这使得 Vue Router 可以在不重新加载页面的情况下更改 URL处理 URL 的生成以及编码。
router-view
将显示与 url 对应的组件。可以把它放在任何地方以适应你的布局。
JavaScript
index.js
import Vue from vue
// 1.引入vue-router
import Router from vue-router
// 2.定义或引入路由组件
const Home { template: div首页/div }
import About from /pages/AboutVue.use(Router)// 3. 创建路由实例并传递 routes 配置
export default new Router({// 4.定义路由:每个路由都需要映射到一个组件routes: [{path: /,name: Home,component: Home}, {path: /about,name: About,component: About}]
})main.js
// 5.创建并挂载根实例
import Vue from vue
import App from ./App
import router from ./routerVue.config.productionTip falsenew Vue({el: #app,router,components: { App },template: App/
})可以在任意组件中以 this.$ router 的形式访问路由实例以 this.$ route 的形式访问当前路由。 About.vue
export default {computed: {username() {// 获取当前路由参数paramsreturn this.$route.params.username},},methods: {goToIndex() {// 跳转到首页this.$router.push(/);},},
}
二、带参数的动态路由匹配
很多时候我们需要将给定匹配模式的路由映射到同一个组件。例如我们可能有一个 User 组件它应该对所有用户进行渲染但用户 ID 不同。在 Vue Router 中我们可以在 路径 中使用一个 动态字段 来实现我们称之为 路径参数
import User from /pages/Userexport default new Router({// 4.定义路由:每个路由都需要映射到一个组件routes: [{path: /,name: Home,component: Home}, {// 动态字段以冒号开始path: /user/:id,name: User,component: User}]
})现在像 /users/123 和 /users/456 这样的 URL 都可以访问到 User 组件。 路径参数 用冒号 : 表示。当一个路由被匹配时它的 params 的值将在每个组件中以 this.$route.params 的形式暴露出来。因此我们可以通过更新 User 的模板来呈现当前的用户 ID。
User.vue
templatedivspan用户ID{{$route.params.id}}/span/div
/template也可以在同一个路由中设置 多个路径参数它们都会映射到 this.$route.params 上的相应字段。例如
匹配模式匹配路径$route.params/users/:username/users/hl{ username: ‘hl’ }/users/:username/posts/:postId/users/hl/posts/123{ username: ‘hl’, postId: ‘123’ }
三、嵌套路由
一些应用程序的 UI 由多层嵌套的组件组成。在这种情况下URL 的片段通常对应于特定的嵌套组件结构通过 Vue Router可以使用嵌套路由配置来表达这种关系。
router/index.js使用 children 来配置嵌套路由
import Vue from vue
import Router from vue-router
import HelloWorld from /components/HelloWorldimport HelloSon1 from /components/hello/HelloSon1
import HelloSon2 from /components/hello/HelloSon2Vue.use(Router)export default new Router({routes: [{path: /,name: HelloWorld,component: HelloWorld,// 配置嵌套路由children: [{// 当 /#/hello1 匹配成功// Hello1 将被渲染到 HelloWorld1 的 router-view 内部path: hello1,name: HelloSon1,component: HelloSon1}, {// 当 /#/hello2 匹配成功// Hello2 将被渲染到 HelloWorld2 的 router-view 内部path: hello2,name: HelloSon2,component: HelloSon2}]}]
})App.vue 还是保持不变
div idappimg src./assets/logo.pngrouter-view/
/div上面的 router-view /是一个顶层的 router-view。它渲染 顶层 路由匹配的组件。同样地组件中也可以包含自己嵌套的 router-view /。例如我们在 HelloWorld 组件的模板内添加一个 router-view /
div classhellospan{{msg}}/spanprouter-link to/hello1hello1/router-linkrouter-link to/hello2hello2/router-link/p-- 对应在在路由中配置的 children --router-view /
/div 首页 如上所示children 配置只是另一个路由数组就像 routes 本身一样。因此可以根据需要不断地嵌套视图。
四. 编程式导航
除了使用 router-link 创建 a 标签来定义导航链接我们还可以借助 router 的实例方法通过编写代码来实现。
导航到不同的位置
this.$router.push(...);当你点击 router-link 时内部会调用这个方法所以点击 router-link :to“…” 相当于调用 this.$router.push(…) 。
声明式编程式 router-link :to“…” router.push(…)
该方法的参数可以是一个字符串路径或者一个描述地址的对象。例如
// 字符串路径
router.push(/helloworld)// 带有路径的对象
router.push({ path: /user/123 })// 命名的路由并加上参数让路由建立 url
router.push({ name: user, params: { id: 123 } })// 带查询参数结果是 /register?planprivate
router.push({ path: /register, query: { plan: private } })// 带 hash结果是 /about#team
router.push({ path: /about, hash: #team })注意name 配合 params 一起使用 path 和 query 一起使用 params 和 path 不能一起使用。
替换当前位置
this.$router.replace(...);它的作用类似于 this.$router.push唯一不同的是它在导航时不会向 history 添加新记录正如它的名字所暗示的那样——它取代了当前的条目。
也可以直接在传递给 router.push 的 routeLocation 中增加一个属性 replace: true
this.$router.push({path: /helloworld, replace: true})
// 相当于
this.$router.replace({path: /helloworld})横跨历史
该方法采用一个整数作为参数表示在历史堆栈中前进或后退多少步类似于 window.history.go(n) 。
// 向前移动一条记录与 router.forward() 相同
this.$router.go(1)// 返回一条记录与 router.back() 相同
this.$router.go(-1)// 前进 3 条记录
this.$router.go(3)// 如果没有那么多记录静默失败
this.$router.go(-100)
this.$router.go(100)篡改历史
router.push、router.replace 和 router.go 是 window.history.pushState、window.history.replaceState 和 window.history.go 的翻版它们确实模仿了 window.history 的 API。
值得一提的是无论在创建路由器实例时传递什么样的 history 配置Vue Router 的导航方法( push、replace、go )都能始终正常工作。
五. 命名路由
除了 path 之外还可以为任何路由提供 name有以下优点
没有硬编码的 URLparams 的自动编码/解码防止在 url 中出现打字错误绕过路径排序如显示一个。
要链接到一个命名的路由可以向 router-link 组件的 to 属性传递一个对象
router-link :to{ name: User, params: { username: hl }}User
/router-link这跟代码调用 router.push() 是一回事
this.$router.push({ name: User, params: { username: hl } })在这两种情况下路由将导航到路径 /user/hl。
六. 命名视图
有时候想同时展示多个视图而不是嵌套展示。 例如创建一个布局有 sidebar (侧导航) 和 main (主内容) 两个视图这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图而不是只有一个单独的出口。 如果 router-view 没有设置名字那么默认为 default。
router-view classview left-sidebar nameLeftSidebar/router-view
router-view classview content/router-view
router-view classview right-sidebar nameRightSidebar/router-view一个视图使用一个组件渲染因此对于同个路由多个视图就需要多个组件使用 components 配置 带上 s
export default new Router({routes: [{path: /,// 多个视图components: {default: Content,// LeftSidebar: LeftSidebar 的缩写// 与 router-view 上的 name 属性匹配LeftSidebar,RightSidebar,}}]
})嵌套命名视图
我们也有可能使用命名视图创建 嵌套视图 的复杂布局。
UserSettings.vue
divh1User Settings/h1NavBar /router-view /router-view namehelper /
/div那么就可以通过下面的路由配置来实现上面的布局
{path: /settings,component: UserSettings,children: [{path: emails,component: UserEmailsSubscriptions}, {path: profile,// 多个视图components: {default: UserProfile,helper: UserProfilePreview}}]
}七. 重定向和别名
重定向
重定向也是通过 routes 配置来完成下面例子是从 / 重定向到 /user
export default new Router({routes: [{path: /,redirect: /user} ]
})重定向的目标也可以是一个命名的路由
export default new Router({routes: [{path: /,redirect: { name: User }} ]
})甚至是一个方法动态返回重定向目标
export default new Router({routes: [{path: /,redirect: to {// 方法接收目标路由作为参数// return 重定向的字符串路径/路径对象return user;return { path: /user, query: { username: hl } }},} ]
})注意在写 redirect 的时候可以省略 component 配置因为它从来没有被直接访问过所以没有组件要渲染。唯一的例外是 嵌套路由 如果一个路由记录有 children 和 redirect 属性它也应该有 component 属性。
别名
重定向 是指当用户访问 / 时URL 会被 /user 替换然后匹配成 /user。那么什么是别名呢
将 / 别名为 /user意味着当用户访问 /user 时URL 仍然是 /但会被匹配为用户正在访问 /user。
export default new Router({routes: [{path: /,component: Helloworld, // 别名alias: /user} ]
})路径为 /user但是访问的是 / 对应 HelloWorld.vue
通过 别名 可以自由地将 UI 结构映射到一个任意的 URL且不受配置的嵌套结构的限制。使别名以 / 开头以使嵌套路径中的路径成为绝对路径。甚至可以将两者结合起来用一个数组提供多个别名
const routes [{path: /user,component: User,children: [// 为这 3 个 URL 呈现 User// - /user// - /view// - /user/index{ path: , component: Content, alias: [/view, index] },],},
]如果路由有参数请确保在任何绝对别名中包含它们
const routes [{path: /user/:id,component: User,children: [// 为这 3 个 URL 呈现 UserDetails// - /user/24// - /user/24/profile// - /24{ path: profile, component: UserDetails, alias: [/:id, ] },],},
]八. 将 props 传递给路由组件
在组件中可以使用 $route 获取传递的参数但它只能用于特定的 URL所以限制了组件的灵活性另一种方式我们可以通过 props 配置来解除这种行为
使用 $route 获取传递的参数
const User {template: divUser {{ $route.params.id }}/div
}const routes [{ path: /user/:id, component: User }]通过 props 获取参数
const User {// 请确保添加一个与路由参数完全相同的 prop 名props: [id],template: divUser {{ id }}/div
}// 当 props 设置为 true 时$route.params 将被设置为组件的 props。
const routes [{ path: /user/:id, component: User, props: true }]布尔模式
上面例子即为 布尔模式 。
命名视图
对于有命名视图的路由必须为每个命名视图定义 props 配置
const routes [{path: /user/:id,components: { default: User, sidebar: Sidebar },props: { default: true, sidebar: false }}
]对象模式
当 props 是一个 对象 时它将原样设置为组件 props。 当 props 是静态的时候很有用例如弹窗的显隐
const User {props: [userPopup1, userPopup2],template: divp v-ifuserPopup1弹窗1/pp v-ifuserPopup2弹窗2/p/div
}const routes [{path: /user,component: User,props: { userPopup1: false, userPopUp2: true }}
]函数模式
创建一个返回 props 的函数可以将参数转换为其他类型将静态值与基于路由的值相结合等等。
const Search {template: div{{ id }}/divprops: [id]
}const routes [{path: /search,component: Search,props: route ({ id: route.query.id })}
]URL /search?id123 将传递 {id: 123} 作为 props 传给 Search 组件。
九. 不同的历史模式
vue-router 分为 hash 和 history 模式。 前者为其默认模式url 的表现形式为http://yoursite.com#home比较难看。 后者的 url 表现形式为http://yoursite.com/home比较美观。 但如果要使用history模式我们需要在后端进行额外配置
export default new Router({// history模式的配置方法mode: history,routes: [{path: /,name: Home,component: Home}]
})服务器配置请参考官方链接服务器配置示例
