Vue---路由

目录

一、为什么要使用Vue

二、在Vue中如何使用路由

（1）安装路由

（2）配置独立的路由文件 

（3）引入路由到项目

（4）指定路由显示入口

（5）指定路由跳转

三、路由传递参数

（1）在路由配置中指定传递参数的key

（2）跳转过程携带参数

（3）在详情页面读取参数

四、嵌套路由

（1）在路由配置文件中添加子路由配置

（2）指定子路由显示位置并添加子路由跳转链接

（3）默认显示（重定向配置）

---

一、为什么要使用Vue

路由你可以将它理解成管理页面之间的工具，对，就暂时将它这样理解就行

二、在Vue中如何使用路由

（1）安装路由

//安装路由
npm install --save router

//启动服务
npm run serve

（2）配置独立的路由文件 

// index.js
import { createRouter, createWebHashHistory } from 'vue-router'
import mainview from '../views/mainview.vue'


const routes = [{
    //path表示访问页面给定的路径
    //compoment表示对应组件
        path: '/',
        name: 'home',
        component: mainview
    },
    {
        path: '/news',
        name: 'news',
        component: () =>
            import ('../views/news.vue')
    }
]


const router = createRouter({
    //history表示访问方式
    history: createWebHashHistory(),
    routes
})


export default router

（3）引入路由到项目

//main。js

import router from './router';
createApp(App).use(router).mount('#app')

（4）指定路由显示入口

//在App.vue中显示路由入口

<router-view></router-view>

（5）指定路由跳转

<router-link to='/'></router-link>

三、路由传递参数

（1）在路由配置中指定传递参数的key

//冒号后面是key的名字
path: "/music/detail/:name",
        name: 'musicdetail',
        component: () =>
            import ('../views/musicdetail.vue')

（2）跳转过程携带参数

<ul>
        <li><router-link to='/music/detail/QQ'>QQ音乐</router-link></li>
        <li><router-link to="/music/detail/酷狗">酷狗音乐</router-link></li>
        <li><router-link to="/music/detail/网易云">网易云音乐</router-link></li>
    </ul>

（3）在详情页面读取参数

//这里的name就是你指定的key叫什么他就是什么 
<h3>{
    
    { $route.params.name }}</h3>

四、嵌套路由

为什么要出现嵌套路由，在一些导航栏中我们会看到一级导航栏下面还有二级，二级下面还有三级等等，这就是嵌套路由，下面我们看看该如何实现，分为仨步。

（1）在路由配置文件中添加子路由配置

const routes = [{
        path: '/',
        name: 'home',
        component: HomeView
    },
    {
        path: '/about',
        name: 'about',
        redirect: '/about/them',
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () =>
            import ( /* webpackChunkName: "about" */ '../views/AboutView.vue'),
        children: [{
//注意开始没有/
                path: 'us',
                component: () =>
                    import ("../views/about/aboutus.vue")
            },
            {
                path: 'them',

                component: () =>
                    import ("../views/about/aboutthem.vue")
            }

        ]
    }
]

（2）指定子路由显示位置并添加子路由跳转链接

<router-link to="/about/us">关于我们</router-link> | 
  <router-link to="/about/them">关于他们</router-link>
  <RouterView></RouterView>

（3）默认显示（重定向配置）

 path: '/about',
        name: 'about',
//重定向，实现默认显示
        redirect: '/about/them',
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () =>
            import ( /* webpackChunkName: "about" */ '../views/AboutView.vue'),
        children:....