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路由