起步
HTML
<div id="app">
Hello App!
起步
HTML
<div id="app">
JavaScript
// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器,
// 或者,只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [
{ path: '/foo',component: Foo },{ path: '/bar',component: Bar }
]
// 3. 创建 router 实例,然后传 routes
配置
// 你还可以传别的配置参数,不过先这么简单着吧。
const router = new VueRouter({
routes // (缩写) 相当于 routes: routes
})
// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由,
// 从而让整个应用都有路由功能
const app = new Vue({
router
}).$mount('#app')
// 现在,应用已经启动了!
通过注入路由器,我们可以在任何组件内通过 this.$router 访问路由器,也可以通过 this.$route 访问当前路由:
定义路由的时候可以配置 meta 字段:
路由组件传参
vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。
如果不想要很丑的 hash,我们可以用路由的 history 模式,这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。
这种模式要玩好,还需要后台配置支持。
应用的基路径。例如,如果整个单页应用服务在 /app/ 下,然后 base 就应该设为 "/app/"
默认值: "router-link-active"
全局配置
默认值: "router-link-exact-active"
全局配置
路由跳转后是否滚动
},//object->string
stringifyQuery (obj) {
}
})
}
当浏览器不支持 history.pushState 控制路由是否应该回退到 hash 模式。默认值为 true。 如果设置为false,则跳转后刷新页面,相当于多页应用
过渡动效
const router = new VueRouter({
routes: [
{
path: '/',components: {
//默认组件
default: Foo,//命名组件
a: Bar,b: Baz
}
}
]
})
全局守卫
import './assets/styles/global.styl'
// const root = document.createElement('div')
// document.body.appendChild(root)
import createRouter from './config/router'
Vue.use(VueRouter)
const router = createRouter()
// 全局导航守卫(钩子)
// 验证一些用户是否登录
router.beforeEach((to,next) => {
console.log('before each invoked')
next()
// if (to.fullPath === '/app') {
// next({ path: '/login' })
// console.log('to.fullPath :'+to.fullPath )
// } else {
// next()
// }
})
router.beforeResolve((to,next) => {
console.log('before resolve invoked')
next()
})
// 每次跳转后触发
router.afterEach((to,from) => {
console.log('after each invoked')
})
new Vue({
router,render: (h) => h(App)
}).$mount("#root")
路由独享的守卫
可以在路由配置上直接定义 beforeEnter 守卫:
path: '/app',// 路由独享的守卫钩子
beforeEnter(to,next) {
console.log('app route before enter')
next()
}
component: Todo,}
]
组件内的守卫
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。
原文地址:https://www.jb51.cc/vue/30947.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。