ip2region -- 查询IP地址

1. 安装组件

npm install vue-router

# 路由定义 文件名称 router.js
import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'

import Index from '@/page/main/Index.vue'
import Login from '@/page/main/Login.vue'
import UpdatePassword from '@/page/main/UpdatePassword.vue'
const router = createRouter({

history: createWebHistory(),

routes: [
    {
    path: "/",
    component: Index,
    meta: { show: true }
     },

    {
    path: "/login",
    omponent: Login,
    meta: { show: false }
    },

    {
    path: "/updatePassword",
    component: UpdatePassword,
    meta: { show: false }
    },
    ]
})

export default router

# 使用路由，在main.js中使用
import router from './router'
.use(router)

2. 声明式导航

# 使用router-link组件来导航，传入to属性指定跳转的链接
<div>
<router-link to="/">点击去首页</router-link>
<router-link to="/login">点击去登录页</router-link>
</div>

3.编程式导航

# 使用router.push("要跳转的路由地址")
function(){
    this.$router.push("/")  // 跳转到首页
}

4.请求参数跳转

# path：填要跳转的路由    
this.$router.push({ path: '/path/to/route', query: { key1: value1, key2: value2 }});
eg:this.$router.push({path:"/qualityscore/detail",query:{"id":22}})

# 获取参数时用得是route
获取值 this.$route.query.[key值]
this.id= this.$route.query.id
console.log(this.id)

"""
this.$router 表示一个全局的路由对象， vue-router 的实例，提供addRoutes、back等方法，相当于一个路由的管理者角色
this.$route 表示当前路由对象, path、query、params等属性，其实就是router里面的一条具体的路由
"""

5. 通过 window.location.href 进行调整

通过按钮点击之后，执行此函数
jumpButton(){
        # window.location.href = 要跳转的地址;
        window.location.href = "/permission/applicationConfig";
    }

---

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。