Vue路由应用详细讲解

// 路由配置
 {
   path: '/pkproperties', // 路径
   name:'pkproperties', // 路由名，path路径必写，用name跳转的时候是根据name名找到path进行跳转
   component: () => import('@/views/pkproperties'), // 组件（组件文件名为index的可省略）,路由懒加载写法
   redirect: '', // 路由重定向，就是当一个页面需要切换多个路由的时候，这里面填的是首次进入页面展示的路由组件地址
   hidden: true，
   children: [] // 嵌套路由，当一页有很多路由需要切换的时候，就需要用到嵌套路由
  },
// 组件内使用
   <router-link to="/pkproperties">点击跳转</router-link>  // path路径跳转
   <router-link to="{name:'pkproperties',query:{id:1}}">点击跳转</router-link>  // 使用命名路由name跳转

 {
   path: '/pkproperties', // 路径
   name:'pkproperties', // 路由名，path路径必写，用name跳转的时候是根据name名找到path进行跳转
   component: () => import('@/views/pkproperties'), // 组件（组件文件名为index的可省略）
   hidden: true
  },
   // 使用命名路由传参，可以传递基本数据类型和数组和对象
   <router-link to="{name:'pkproperties',query:{id:1}}">点击跳转</router-link>  // name名跳转,query传递参数
   <router-link to="{name:'pkproperties',params:{id:1}}">点击跳转</router-link>  // name名跳转,params传递参数
   this.$route.query.id // 获取传递的参数（.传递参数的键名）
   this.$route.params.id // 获取传递的参数（.传递参数的键名）

{
   path: '/pkproperties', // 路径
   name:'pkproperties', // 路由名，path路径必写，用name跳转的时候是根据name名找到path进行跳转
   component: () => import('@/views/pkproperties'), // 组件（组件文件名为index的可省略）
   hidden: true
  },

methods：{
   onSkipTransferParameters(){
   // params传参
        this.$router.push({
           name: "pkproperties",
           params: { 
           name: '小明',
           id: 1,
          },
        });
     onSkipTransferParameters(){
   // query传参
        this.$router.push({
           name: "pkproperties",
           query: { 
           name: '小明',
           id: 1,
          },
        });
   }
 // 获取传递的参数
 this.$route.params.name // 获取就是在当前跳转的组件内调用$route实例，是用params就.params.键名获取值
 this.$route.query.name // 获取就是在当前跳转的组件内调用$route实例，是用query就.query.键名获取值

   { path:"/", redirect: {path:"pkproperties", query:{Pid:'1'}} },
   { path:"pkproperties", component: ()=>import("../views/pkproperties") }

// 把这段代码直接粘贴到router/index.js中的Vue.use(VueRouter)之前
const originalPush = VueRouter.prototype.push;
  VueRouter.prototype.push = function (location) {
  return originalPush.call(this, location).catch(err => { })
};

 mounted() {
    /**
     * 路由跳转回到顶部
     */
    // chrome
    document.body.scrollTop = 0;
    // firefox
    document.documentElement.scrollTop = 0;
    // safari
    window.pageYOffset = 0;
  },

    // 全局导航守卫beforeEach
router.beforeEach((to, from, next) => {
	// to要到哪个路由去
    // from从哪个路由来
    // next下一步（无论失败与否都要调用，否则会阻止程序继续执行）
}

import router from './router'
import { getToken } from '@/common/TokenStore'
const whiteList = ['/login', '/register'] // 白名单登录注册界面无需验证Token是否登录直接放行
// 全局导航守卫beforeEach
router.beforeEach((to, from, next) => {
	// 白名单中路由直接放行
	if (whiteList.indexOf(to.path) !== -1) {
		next()
		return
	}
	// 判断需要登录身份认证的路由
	const token = getToken() // 获取token
	if (token) {
		next()
	} else {
		next(`/login`) // 如果登录不存在，重定向到登录界面
	}
})

import './permission' // 引入即可

    methods: {
      // 登录
      handleLogin() {
        this.$axios.post('/api/Login',{
         username: this.loginForm.username, // 用户名
         password: this.loginForm.password // 密码
        }).then(res => { 
          if(res.data.code != 0) return this.$message.error(res.data.message) // code 不等于0,返回失败的结果，（这的判断参数是根据后端返回的数据进行的，不是固定的）
          if(res.data.code == 0){
            this.$message.success('登录成功')
            // 存储token开始时间
            window.localStorage.setItem('tokenStartTime',new Date().getTime())
            // 存储token
            window.localStorage.setItem('token',res.data.data.token)
            this.$router.push('/home/ks')
          }else {
            this.$message.error('登录失败')
          }
        })
      }
}

// 导入element提示语的组件可以去element-ui查看用法，这是按需引入的
import {
    Message
} from 'element-ui'
// 添加请求拦截器
// 拦截器的第二部分，第一部分在main.js里面
router.beforeEach((to, from, next) => {
  // 获取存储localStorage的token
  let token = window.localStorage.getItem('token')
  // 获取存储token的开始时间
  const tokenStartTime = window.localStorage.getItem('tokenStartTime')
  // 后台给出的token有效时间为一天，这个是后端给的时间以后端为准
  const timeOver = 86400000
  // 获取当前时间
  let date = new Date().getTime()
  // 当前时间减去获取Token的时间如果大于说明是token过期了
  if(date - tokenStartTime > timeOver) {
      token = null // Token过期赋值为null
  }
  // 如果token过期了
  if (!token) {
    if (to.path == '/login') return next()
    // 注意要import element的Message组件
    Message.error("登录状态过期，请重新登录")
    return next('/login')
    // 如果token没有过期，又是选择了登录页面就直接重定向到首页，不需要重新输入账户密码
  } else if (to.path == '/login') {
    return next('/home/ks')
  }
  next()
 
})
export default router

router.afterEach((to,from)=>{<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->})

methods：{
  onSkip(){
    window.location.href = "http://xxx.xxx.xxx"
  }
}

methods：{
  onSkip(){
    window.open("https://xxx.xxx.xxx/", "_blank");
  }
}

 var a = document.createElement("a");
     a.setAttribute("href", "www.baidu.com");
     a.setAttribute("target", "_blank");
     a.click();