您现在的位置是:首页 >技术教程 >Vue---路由网站首页技术教程

Vue---路由

菜到极致就是渣 2023-07-10 12:00:03
简介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:....

风语者!平时喜欢研究各种技术,目前在从事后端开发工作,热爱生活、热爱工作。