vue-router

本文详细介绍Vue.js与Vue Router的使用方法,包括如何安装Vue Router、定义箭头函数、理解let/var/const的区别,以及单页面应用的路由配置过程。从基本语法到路由管理,全面解析Vue开发技巧。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >


1. 安装或引用

  1. 如果我们是在当前页面引入使用,只用在<script>中引入 vue 和 vue-router 的包即可,无需手动安装;
<script src="/path/to/vue.js"></script>
<script src="/path/to/vue-router.js"></script>
  1. 如果是在一个模块化工程中使用它,必须要通过 Vue.use() 明确地安装路由功能:
npm install vue-router   # 要有node.js环境,才能使用npm安装vue组件

         然后在模块中,我们需要先导入模块,再明确使用路由功能

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

2. 需要知道的一些语法

2.1 => 定义函数

//1.无形参
var f = () => 10;
// 等同于
var f = function () {
	 return 10 
};

//2.有形参
var sum = (a, b) => a + b;
// 等同于
var sum = function(a, b) {
  return a + b;
};

2.2 let ,var 与 const

  1. const 声明一个只读的常量,一旦声明,常量的值就不能改变。
const a = 10;
  1. var 在函数内声明的变量只能作为局部变量;即使在块中声明,仍然是全局变量;当变量在块外定义,在块内变量被重新声明时,变量值发生改变;
{ 
    var x = 2; 
}
// 这里可以使用 x 变量
/*-----------------------*/
var x = 10;
// 这里输出 x 为 10
{ 
    var x = 2;
    // 这里输出 x 为 2
}
// 这里输出 x 为 2
  1. let 更为严格,在块中定义的变量,只能作为局部变量使用;当变量在块外定义,在块内被重新声明时,变量值只在块内发生变化,不影响块外的数据;
{ 
    let x = 2;
}
// 这里不能使用 x 变量
/*-----------------------*/
var x = 10;  		// 注意let不能重复声明
// 这里输出 x 为 10
{ 
    let x = 2;
    // 这里输出 x 为 2
}
// 这里输出 x 为 10

2.3 concat

concat() 方法用于连接两个或多个数组,该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。

//语法
arrayObject.concat(arrayX,arrayX,......,arrayX)

3 单页面js嵌套路由配置

单页面是把网页拆分成一个个的模块进行开发,通过异步交互的方式,来实现页面的局部刷新及功能实现;其中路由的配置大致可以分为x步,分别是:

  1. 嵌套配置局部页面的单路由(基于主页面)route;
  2. 组装所有页面路由 routes;
  3. 创建路由管理实例 router 并导入总路由配置 routes;
  4. 将 router 注入到 vue 根实例中,即可使用路由功能。

这里通过代码演示,学习项目中路由的配置:

3.1 局部单路由(route)配置

当某一局部页面功能完善后,需要进行路由配置,使我们能在浏览器段访问到该界面;

//导入主页组件和局部页面组件
import Home from '@/module/home/page/home.vue';
import page_list from '@/module/cms/page/page_list.vue'; //@指向src目录,可以在webpack.base.conf.js中配置

//配置并导出子页面嵌套路由
//主页面vue中需要在合适的位置引入路由路径。。这个后面再谈(伏笔)
export default [{
    path: '/',  //主页面路径
    component: Home,  //主页面组件
    name: 'CMS',//菜单名称
    hidden: false,//显示菜单名称
    //子菜单
    children: [
        //我们需要在"主页面"组件中,添加"页面列表"组件,来实现当前路由所配置的局部页面功能
        /**
         * path: 标识在主页面组件访问路径的基础上,来访问子页面组件的路径
         * component: 子页面组件,在前面已经导入
         */
        {path: '/cms/page/list', name: '页面列表', component: page_list, hidden: false}
    ]
}
]

3.2 路由组合(routes)

当一个一个的局部页面功能都完善了,并且配置了相应的路由,我们就需要将所有的路由汇总,统一交由 router 来管理;


import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);
// 定义路由配置
let routes = []
let concat = (router) => {
    routes = routes.concat(router)
}
// 导入路由规则
import HomeRouter from '@/module/home/router'
import CmsRouter from '@/module/cms/router'
// 合并路由规则
concat(HomeRouter)//加入home模块的路由
concat(CmsRouter)//加入cms模块的路由
export default routes; //导入routes路由组合

3.3 路由管理(router)及 将router注入到vue根实例

这两部我们一般都 main.js 中配置完成;

import Vue from 'vue'
import VueRouter from 'vue-router'  //在main.js文件中引入路由插件
import routes from './base/router'  //在main.js中引入路由组合

Vue.use(VueRouter)   			    //使用路由插件

const router = new VueRouter({      //实例化VueRouter,并导入配置参数进行管理
  routes:routes                     //后面的routes即上面路由组合的总路由配置
})

new Vue({							//在vue根实例中挂在(注入)router
  el: '#app',
  router,   //A.挂载路由
  store,
  render: c => c(App)
})
### Vue Router 安装 为了使用 Vue Router,在项目中需先完成其安装。推荐的方式是利用 npm 或 yarn 来添加依赖: ```bash npm install vue-router # 或者 yarn add vue-router ``` 这一步骤确保了开发环境中有最新版本的 Vue Router 可供调用[^3]。 ### 配置 Vue Router 配置 Vue Router 主要涉及创建路由实例并将其挂载到 Vue 应用上。下面是一个简单的例子来展示如何设置基本的路由功能: ```javascript // 创建 routes.js 文件定义路径映射关系 import { createRouter, createWebHistory } from 'vue-router' import Home from './views/Home.vue' import About from './views/About.vue' const routes = [ { path: '/', name: 'Home', component: Home, }, { path: '/about', name: 'About', component: About, } ] const router = createRouter({ history: createWebHistory(), routes // 缩写为 `routes: routes` }) export default router; ``` 这段代码展示了如何导入必要的模块,定义页面组件对应的路径以及初始化路由器对象[^1]。 ### 使用 Vue Router 一旦完成了上述两步操作之后就可以在应用入口文件 main.js 中引入刚刚创建好的路由实例,并传给 Vue 实例: ```javascript import { createApp } from 'vue'; import App from './App.vue'; import router from './router'; createApp(App).use(router).mount('#app'); ``` 这样就成功集成了 Vue Router 到应用程序当中去了。 对于更复杂的场景比如嵌套路由、导航守卫等功能,则可以参阅官方文档获取更多指导。 ### 示例 这里给出一个完整的简单案例用于理解整个流程: #### 1. 安装 VueVue Router 假设已经有一个基于 Vue CLI 初始化的新工程,执行如下命令即可获得所需库支持: ```bash npm install vue@next vue-router@next ``` #### 2. 设置路由表 编辑 src/router/index.js 添加如下内容: ```javascript import { createRouter, createWebHashHistory } from "vue-router"; import HelloWorld from "../components/HelloWorld"; const routes = [{ path: "/", component: HelloWorld }]; const router = createRouter({ history: createWebHashHistory(), routes, }); export default router; ``` #### 3. 修改主程序启动逻辑 最后调整 src/main.js 如下所示: ```javascript import { createApp } from "vue"; import App from "./App.vue"; import router from "./router"; createApp(App).use(router).mount("#app"); ``` 以上就是关于 Vue Router 的快速入门指南,涵盖了从零开始构建带有路由功能的应用所需的全部知识点。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

mitays

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值