vue-router路由导航


安装路由
npm install vue-router -S
 
路由导航守卫
// to :是要去的哪个页面 路由相关的参数 (表示 将要访问的那个路由对象) // from :从哪个页面即将离开 (从哪个路由对象,跳转而来) // next :next 是一个函数,就相当于 Node 里面 express 中的 next 函数 (代表放行) // next() 表示放行 next('/login') 表示强制跳转到login页  // 注意: 这里的 router 就是 new VueRouter 得到的 路由对象 // 挂载路由导航守卫
router.beforeEach((to, from, next) => { // 如果用户输入的是login页面 直接放行
  if (to.path === '/login') return next() // 查看客户端是否有token值
  const tokenStr = window.sessionStorage.getItem('token') // 如果没有token 则直接跳转到登录页
  if (!tokenStr) return next('/login') // 有token放行
 next() }) // 把路由导航暴露出去
export default router
 
去掉地址栏的 # 号
const router = new VueRouter({ mode: 'history', // 这样就能去掉URL地址栏的 # 号
 routes })
 
路由传参
使用<router-link to="">传递参数
父组件中: 使用 <router-link to="/需要跳转的路径/需要传递的参数"></router-link>
// to属性,表示 点击此链接,要跳转到哪个 hash 地址 // tag 属性 要渲染成什么标签 默认 是 a标签 tag可以转换成自己想要的标签
<router-link to="/跳转的地址/传递的参数" tag="li">首页</router-link>
子组件中,使用 props 来接收传递过来的参数
export default { props: ['传递的参数'] }
如果配置文件中没有开启 props 的话, 在子页面 可以使用 this.$route.params.传递的参数 
 
路由配置文件(这是为接收页面开启的props)
{ path: '子路由地址/:传递的参数', component: 子路由文件,
   props: true // 如果在组件中,想要拿到 path 中匹配的路由参数项, 可以为 路由规则 开启 props 传参 }
 
使用#router传递参数
this.$router.push({ path: '要跳转的地址', name: '要跳转的路径的 name,在 router 文件夹下的 index.js 文件内找', params: { // 需要传递的参数 键 值的格式 
                key: 'key', msgKey: this.msg } /*query: { // 需要传递的参数 键 值的格式 key: 'key', msgKey: this.msg }*/ }) 
 
接收
this.$route.params.键 this.$route.query.键
 
 
 
1.params
由于动态路由也是传递params的,所以在 this.$router.push() 方法中path不能和params一起使用,否则params将无效。需要用name来指定页面。
通过name和params传递参数
this.$router.push({ name: ‘index’, params: { username: “fatjack”, password: 123 }})
获取
this.$route.params.username
<div>当前用户名: {{this.$route.params.uaername}} </div>
 
2.query
通过path和query传递参数
this.$router.push({path: ‘/index’, query: { username: “fatjack”, password: 123 }});
获取
this.$route.query.username
 
之前的router-link是标签跳转;除了使用router-link是标签跳转之外,还可以使用Javascript来实现路由的跳转;
编程式导航
使用vue-router提供的JS  API实现路由跳转的方式,叫做编程式导航;
编程式导航的用法 
// 如果要跳转指定的 hash地址, 只能使用push方法
this.$router.push('路径的地址') 如果要跳转到指定hash地址,只能使用push方法
this.$router.go(n)   n = -1 后退一步  n = 1 前进一步
this.$router.forward() 前进一步
this.$router.back()  后退一步
以上的记得都要注册在methods 里 的方法里
 
 
 this.$route包含的信息
// fullpath 全地址 // path 路由地址 // params 路由的参数  // query 问号后查询的参数 // name 路由名称 // meta 路由元信息,标识路由是否需要全局守卫
 
 
 
 路由基本样式
const routes = [ // 这个 routes 就是 路由 规则 的数组,里面要放很多的对应关系
  // 路由规则的基本组成 { path: '/hash地址', component: 配置对象(要展示的组件) },在path中 ,带冒号的,是路由参数项
 { path: '/', redirect: '/home' // 通过 redirect是属性,可以实现前端路由的重定向 如果访问的是 根路径 就会跳转到指定路径
 },
 { path:
'/home', component: Home, props: true // 开启路由传参 }, { path: '/about/:接收的参数', // :接收的参数 component: About, children: [ // children 定义子路由规则 { path: '/', component: '' } ] }] const router = new VueRouter({ routes, mode: 'history' // 区掉地址栏中的 # 号 }) export default router // 把路由暴露出去

 

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
vue-router路由


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM