配置路由的步骤

山治有个温暖的心

已于 2022-09-28 21:49:08 修改

阅读量649

点赞数

文章标签： javascript 前端

于 2022-09-18 10:07:52 首次发布

本文链接：https://blog.csdn.net/weixin_43502808/article/details/126914376

版权

yarn add vue-router@3（下载依赖）一、scr下的router下创建index.js

import Vue from 'vue' import VueRouter from 'vue-router' // 2.把VueRouter挂载到vue上 Vue.use(VueRouter) // 3.配置路由规则

// 1. 引入vue和vue-router包
import Vue from 'vue'
import VueRouter from 'vue-router'

// 2. 将VueRouter注册到Vue中
Vue.use(VueRouter)


// 3. 配置路由规则数组
const routes = [
    { 
        path: '/',
     redirect:'/login'
    },
    {
        name: 'Login',
        path: '/login',
        component: Login
    },
    {
        path: '/home',
        component: ()=>import('@/views/Home')
    },
    {
        path: '/404',
        component: ()=>import('@/views/NotFound/index')
    },
    {
        path: '/introduce',
        component: ()=>import('@/views/Introduce')
    },
    {   name:'News',
        path: '/news',
        component: ()=>import('@/views/News')
    },
    {   name:'Product',
        path: '/product',
        component: ()=>import('@/views/Product')
    } ,
    
    {     name:'ProductInfo',
        path: '/productInfo',
        component: ()=>import('@/views/Product/productInfo')
    }   ,
    {
        path: '/UserCenter',
        component: ()=>import('@/views/UserCenter'),
        children:[{
            path: 'welcome',
        component: ()=>import('@/views/UserCenter/child/welcome.vue'),
        },
        {
            path: 'information',
        component: ()=>import('@/views/UserCenter/child/Information.vue'),
        }]
    },
    {
        path: '/newsinfo/:id',
        component