Vue-Router细节记录 · Mr.li's Blog

vue-router使用

yarn add vue-router@next --dev, 参数说明packageName@tagorpackageName@version
创建router/index.js

import { createRouter, createWebHistory } from "vue-router";
import ShowList from "../components/ShowList.vue"
const router = createRouter({
    history: createWebHistory(),
    routes: [
        {
            path: "/show",
            component: ShowList
        },
        {
        path: "/login",
        name: "Login",
        meta: {
            title: '登录'
        },
        // 懒加载
        component: () => import ( /* webpackChunkName: "login" */ "../views/Login.vue")
    },{ 
        path: '/user/:id', 		// 如/user/111, router-link to="/user/111"也行。注id为params参数,  User.vue中通过      {{ $route.params.id }} 获取
      components: { default: User, sidebar: Sidebar },
        /**在组件中使用 $route 会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性。可以使用 props 将组件和路由解耦：这样你便可以在任何地方使用该组件，使得该组件更易于重用和测试。 */
      props: { default: true, sidebar: false }
    }
        
        
    ]
})

router.beforeEach((to, from, next) => {
    document.title = `${to.meta.title} | vue-manage-system`;
    const role = localStorage.getItem('ms_username');
    if (!role && to.path !== '/login') {
        next('/login');
    } else if (to.meta.permission) {
        // 如果是管理员权限则可进入，这里只是简单的模拟管理员权限而已
        role === 'admin'
            ? next()
            : next('/403');
    } else {
        next();
    }
});
export default router

app下进行router跳转

<template>
  <div id="app">
    <div>
        // 下面的叫声明式
        <router-link to="/">Home</router-link> |
        <router-link to="/show">show</router-link>|
        <router-link to="/hello">hello</router-link>|
        <router-link :to="{name: 'antd', params: { id: 2 }}">antd</router-link>
    </div>
    <router-view/>
      
  </div>
</template>

子vue中点击按钮后进行router跳转

    // vue2写法
    function submitForm(formName) {
            this.$refs[formName].validate((valid) => {
            if (valid) {
                this.$router.push({name: "Mainwithout", params: {name: this.form.name}})   // 如果要传参，则为router-name；如果不传参直接push(path)
                sessionStorage.setItem("isLogin", true)
                this.$store.dispatch("asyncUpdateUser", {name: this.form.name})
                console.log("enter", this.$store.state)
            } else {
                 this.$message.error('错了哦，这是一条错误消息');
                return false;
            }
            });
        }
	// vue3写法：Vue-router 4.x为此提供了useRoute()：
import {useRouter} from 'vue-router'
setup(props,ctx){
    //router是全局路由对象，route= userRoute()是当前路由对象
    let router = useRouter();
    let start = () => {
        // 这个叫编程式
        router.push({
            //传递参数使用query的话，指定path或者name都行，但使用params的话，只能使用name指定 
            path:'/home',
            query:{
                num:1
            }
        })
    }
    
    onMounted(() => {
      const id = router.params.id
    })
}

调用方式：

// 字符串
router.push('home')
// 对象
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})
// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

// ▲注：同样的规则也适用于 router-link 组件的 to 属性。

router.replace(location, onComplete?, onAbort?)
// 跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。
router.go(n)
// 这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，类似 window.history.go(n)。

区分router和route

$router : 是路由操作对象，只写对象
$route : 路由信息对象，只读对象

//操作 路由跳转
this.$router.push({
      name:'hello',
      params:{
          name:'word',
          age:'11'
     }
})

//读取 路由参数接收
this.name = this.$route.params.name;
this.age = this.$route.params.age;

区分query和params

query传参要用path来引入，params传参要用name来引入

// path+query==> /second?queryId=2222&queryName=query
//query传参，使用name跳转
this.$router.push({
    name:'second',
    query: {
        queryId:'20180822',
        queryName: 'query'
    }
})

//query传参，使用path跳转
this.$router.push({
    path:'second',
    query: {
        queryId:'20180822',
        queryName: 'query'
    }
})

//query传参接收
this.queryName = this.$route.query.queryName;
this.queryId = this.$route.query.queryId;

/** ---------------------- **/
// name+params==> /second/20180822/query， 更多见：https://router.vuejs.org/zh/guide/essentials/named-routes.html
this.$router.push({
  name:'second',
  params: {
    id:'20180822',
     name: 'query'
  }
})
//params接收参数， 是$route
this.id = this.$route.params.id ;
this.name = this.$route.params.name ;
//路由
{
    path: '/second/:id/:name',
    name: 'second',
    component: () => import('@/view/second')
}

params是路由的一部分, 必须要在路由后面添加参数名。query是拼接在url后面的参数，没有也没关系。
params一旦设置在路由，params就是路由的一部分，如果这个路由有params传参，但是在跳转的时候没有传这个参数，会导致跳转失败或者页面会没有内容。（最重要的一点，params刷新会消失。query则不会）
1
2
parmas：https://blog.csdn.net/xxx
query: https://blog.csdn.net?xxx
from：https://router.vuejs.org/zh/guide/essentials/dynamic-matching.html

跳转与视图

router-link 实现路由之间的跳转，如点击show超链接则会跳转到http://localhost:8080/show

<!-- 字符串 -->
<router-link to="home">Home</router-link>
<!-- 渲染结果 -->
<a href="home">Home</a>

<!-- 同上 -->
<router-link :to="{ path: 'home' }">Home</router-link>
<!-- 命名的路由 -->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
<!-- 带查询参数，下面的结果为 /register?plan=private -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>

视图：router-view 当路由的path 与访问的地址相符时，会将指定的组件内容替换该 router-view，如果不点击而是直接将URL换成http://localhost:8080/show也会显示ShowList.vue的内容（为什么是ShowList.vue？是因为router/index.js中将path=''/show'与ShowList.vue绑定了）

命名视图==》存在多个、多层视图

动态传参跳转

采坑：

1
2

:to="{path:'invest/scattered',query: {productId: list.id}}"
to="invest/scattered?productId=1"	// 如果不加冒号访问动态参数即to="{path:'invest/scattered',query: {productId: list.id}}"，则会乱码

冒号可以传动态的参数(也可以传静态的)；不加冒号是静态的路径；动态路由也可以以静态路由的形式写，参数固定如:to="{name: 'antd', params: { id: 2 }}"==>to="/antd/2"；参数为变量：

1 2	<router-link :to="{name: 'antd', params: { id: 2 }}">antd</router-link> <router-link :to="`/antd/${uid}`">antd</router-link>

更推荐指定url的写法，因为就不用考虑name还是path了

// App.vue
<router-link :to="`/antd?name=mrli`">antd</router-link>
// 要跳转的 Antd.vue
{{ $route.query.name }}

// App.vue
<router-link :to="`/antd/3`">antd</router-link>
// 要跳转的 Antd.vue
{{ $route.params.id }}
// 还需要router/index.js中定义, 不然$route.params.id无法将那个值对应到id上
{
    path: "/antd/:id",
    name: "antd",
    component: AntdCom
},