Vue----路由Vue router

根据官方文档说明安装：

npm:

npm install vue-router@4
​
cnpm install vue-router@4

​

yarn:

yarn add vue-router@4

我们可以从github上面下载写stars比较多的示例下来参考如何使用

挑选热度最高的，进去查看examples示例

将项目clone下来后打开，就可以参考里面vue-router的示例了。

查看示例demo:将demo使用到项目中

 项目中使用router：

        1.src中创建router目录，专用来存放路由相关信息;如果直接把路由数据都放在main.js文件中，main.js文件就变得非常臃肿。

        2.在router中创建index.js目录 。

        3.将demo中的示例copy到index.js中

// 0. 安装并导入vue-router
import { createWebHistory, createRouter } from "vue-router";
import home from "@/components/home.vue";
import about from "@/components/about.vue";
import Login from "@/components/login";

const routes = [
    {
        path: "/",
        name: "Home",
        component: home,
    },
    {
        path: "/about",
        name: "About",
        component: about,
    },
    {
        path: "/login",
        name: "Login",
        component: Login,
    },
];

const router = createRouter({
    history: createWebHistory(),
    routes,
});
// 4. export关键字导出路由
export default router;

// 5. 在main.js入口文件中导入vue-router对象

// 6. 根组件App.vue中加载路由内容

        4. 在main.js入口文件中使用该router

import { createApp } from 'vue'
import App from './App.vue'
// 导入vue-router对象
import router from './router'
const app = createApp(App)
// 使用router
app.use(router)
app.mount('#app')

vue2和vue3中main.js入口文件的区别（左2，右3）： 

        5. 在根组件App.vue中使用router-view导入路由内容

                <router-link to=" ">xxx</router-link>

6.浏览器中访问/路径，验证是否会访问到组件内容

7.记一次坑：

vue报错：Component name “xxx“ should always be multi-wordvue报错：Component name “xxx“ should always be multi-word        

原因：语法提示的锅

解决：
在 vue.config.js 中关闭语法提示：

module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false, //关闭eslint检查
})

8.组件中获取前端传递过来的字符串参数/路径参数：

        this.$route.query 获取字符串参数

        this.$route.params 获取路径参数

示例：

login组件：

<template>

    <p>model中的用户名为：{{ruleForm.username}}</p>
    <p>model中的密码为：{{ruleForm.passwd}}</p>


</template>

<script>
export default {
  name: "login",
  data(){
    return {
      labelPosition:"left",
      ruleForm:{
        username:"chuntian",
        passwd:123456
      }
    }
  },
  created() {
    console.log("实例创建时，会触发created钩子函数中的内容")
    this.ruleForm.username = this.$route.query.name
    this.ruleForm.passwd = this.$route.query.pwd
  },
  mounted() {
    console.log("挂载后，会触发mounted钩子函数中的内容")
  }

}
</script>

<style scoped>
.demo-ruleForm{
  width:350px;
  margin:50px auto;
}


</style>

效果：

嵌套路由（子路由）：

        在父路由下再添加子路由

        父路由中通过children:[{},{}]来绑定子路由

import { createWebHistory, createRouter } from "vue-router";
import home from "@/components/home.vue";
import about from "@/components/about.vue";
import Login from "@/components/login";

const routes = [
    {
        path: "/login",
        name: "Login",
        component: Login,
        children:[
            {path:'',name:'About',component:about},
            {path:'/home',name:'Home',component:home},
        ]
    },
];

const router = createRouter({
    history: createWebHistory(),
    routes,
});

export default router;

路由是从上到下匹配

在子组件上使用<router-view></router-view>