您现在的位置是：网站首页>软件开发>前端技术栈>vuevue

Vue 路由设置梳理（2）路由规则编写

风口下的猪2022-06-24【vue】

简介

后端路由定义的是路径与函数/接口的映射关系，而前端路由则定义的是路径与组件的映射关系。

Vue中，前端的页面跳转，实际上是跟组件节点App.vue通过路由规则（路径与组件的映射关系）根据路径调用不同组件进行动态渲染。即vue的页面跳转就是根组件的动态渲染

一般将页面放到page或者view文件夹下

import modulelearn from '@/views/base/module';
import test from '@/views/base/test';
import defaultPage from '@/views/base/defaultPage';

定义路由规则，主要是path路径属性和component组件属性，即申明路径与组件的映射关系

const routes=[
    {
        path:'/base/defaultPage',
        name:'defaultPage',
        component:defaultPage
    },
    {
        path:'/base/module',
        name:'modulelearn',
        component:modulelearn
    },
    {
        path:'/base/test',
        name:'test',
        component:test
    }
];

注意：

vue-cli生成项目的@指向src文件夹，src是整个项目的设计文件夹，即项目的资源、代码、页面都放在src

很赞哦！ (0)

上一篇：Vue 路由设置梳理（1）安装及初始路由

下一篇：Vue 路由设置梳理（3）申明式路由跳转及编程式路由跳转

数据库

开发终端

语言基础

项目管理

产品设计

系统

工作规范

计算机网络

前端技术栈

数据结构

计算机组成原理

后端技术栈

性能优化

安全设计

常见模块

计算机操作系统

服务器

python

MySQL

thinkphp

PHP

Java

JavaScript

Windows

Linux

特效

indexedDB

vue

淘宝联盟

Ionic

Angular

微信小程序

支付宝小程序

uni-app

css/sass/less

支付

socket

爬虫

web性能优化

消息推送

CVM

sqlite

Redis

前端基础

基础

element

Nginx

yii2

/ponder/index.php/index/catelist/catelist/cateid/10.html

标签云

站点信息

文章统计：528篇
移动端访问：扫码进入SQ3R

软件开发(47)	MySQL(25)
thinkphp(89)	PHP(33)
JavaScript(39)	项目管理(3)
产品设计(5)	Linux(15)
计算机网络(6)	计算机组成原理(1)
微信小程序(7)	安全设计(4)
uni-app(70)	淘宝联盟(4)
支付(7)	socket(18)
计算机操作系统(4)	爬虫(5)
web性能优化(5)	消息推送(9)
CVM(2)	Redis(27)
indexedDB(5)	vue(57)
特效(2)	css/sass/less(5)
基础(1)	element(1)
Nginx(6)	yii2(19)

您现在的位置是：网站首页>软件开发>前端技术栈>vuevue

Vue 路由设置梳理（2）路由规则编写

相关阅读 (同一栏目)

栏目目录

标签云

站点信息

申请链接友情链接

您现在的位置是：网站首页>软件开发>前端技术栈>vuevue

Vue 路由设置梳理 （2）路由规则编写

相关阅读 (同一栏目)

栏目目录

标签云

站点信息

申请链接友情链接

Vue 路由设置梳理（2）路由规则编写