Vue：vue-router路由

说明

　　学习的时候，尽量的打开官方的文档

　　Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：

嵌套的路由/视图表
模块化的、基于组件的路由配置
路由参数、查询、通配符
基于 Vue.js 过渡系统的视图过渡效果
细粒度的导航控制
带有自动激活的 CSS class 的链接
HTML5 历史模式或 hash 模式，在 IE9 中自动降级
自定义的滚动条行为

安装

　　基于第一个vue-cli进行测试学习;先查看node_modules中是否存在 vue-router

　　vue-router 是一个插件包，所以我们还是需要用 npm/cnpm 来进行安装的。打开命令行工具，进入你的项目目录，输入下面命令。

　　　　npm install vue-router --save-dev

　　如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能：

测试

1. 在入口main.js 配置路由设置

2. 编写自定义组件

3. 配置路由转发

4. 使用

启动测试一下： npm run dev

路径是如何通过router找到对应组件的呢？简单画一个路径图

详细学习，请去官方文档查看

原文地址：https://www.cnblogs.com/FondWang/p/12345383.html

时间： 2024-10-08 22:23:03

Vue：vue-router路由的相关文章

Vue中router路由异步加载组件-优化性能

何时使用异步加载组件当首页app.js文件太大时,可以拆分组件异步加载,如果app.js文件很小时,不建议使用异步加载组件,因为异步加载组件时每次都要发送一个HTTP请求,这样的代价远比首页一次性加载小的js文件的开销大:所以当首页一次性加载的文件太大时,可以使用异步加载组件的写法. 原先写法: 异步加载写法: 不仅路由内可以使用异步加载,组件内也可使用异步加载,建议只有当app.js大于1M时再使用: 原文地址:https://www.cnblogs.com/nayek/p/11824987

vue router路由（三）

当环境搭建及Vue语法与指令都有所了解,该说下router. build目录是打包配置文件 (不建议动) config是vue项目基本配置文件 dist是构建后文件 js 手动创建 (根据需要) node_modules 根据package.json 安装依赖模块 src资源文件,基本文件都会放在这里 app.vue 父组件 main.js 入口文件 static构建好的文件会在这个目录 index.html 主页 1.首先安装路由通过npm: npm install vue-router 在

Vue Router 路由守卫：完整的导航解析流程

完整的导航解析流程 1 导航被触发. 2 在失活的组件里调用离开守卫. 3 调用全局的 beforeEach 守卫. 4 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+). 5 在路由配置里调用 beforeEnter. 6 解析异步路由组件. 7 在被激活的组件里调用 beforeRouteEnter. 8 调用全局的 beforeResolve 守卫 (2.5+). 9 导航被确认. 10 调用全局的 afterEach 钩子. 11 触发 DOM 更新. 12 用

Vue Router 路由懒加载

将异步组件定义为一个返回Promise 的工厂函数. 函数样式的import()语法,是JavaScript新增加的模块加载语法,提案正处于TC39委员会的第四阶段.它返回一个Promise. 一路由配置 import Vue from "vue"; import Router from "vue-router"; const Home = () => import(/*webpackChunkName:"home"*/ "./

vue router 路由的学习

新建vue项目的时候你会发现有个文件夹叫router 这个文件夹下你可以设置一个index.js但是需要引入的两个包 import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) 注册路由组件 export default new Router 默认加载这个路由 routes: [] 内部可以写你要配置的路由路径 path: '/' //配置地址多数用来跳转的地址 nam: 'bac'// 一般用来路由跳转this

vue 2.0 路由创建的详解过程

1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>Document</title> 7 <script src="vue221.js"></script> 8 <script src="vue-router231.js&qu

vue项目搭建+路由使用

vue脚手架搭建步骤: 1. 全局安装 vue-cli2. npm install --global vue-cli3. 创建一个基于 webpack 模板的新项目4. vue init webpack // 当前目录5. vue init webpack my-project // 新建目录6. 安装依赖,走你7. cd my-project8. npm install9. npm run dev 路由使用: 重要文件(package.json.main.js.router\index.js.

requirejs vue vue router简单框架

index.html 入口页面 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>vue</title> <link href="../css/index.css" rel="stylesheet"> <script

vue 中简单路由的实现

1. 引入vue-router,如果是在脚手架中,引入VueRouter之后,需要通过Vue.use来注册插件``` import Vue from 'vue' import Router from 'vue-router' Vue.use(Router)```2. 创建router路由器``` new Router(options)```3. 创建路由表并配置在路由器中``` var routes = [ {path,component}//path为路径,component为路径对应的路由组

Vue 2.0 路由全局守卫

路由跳转前做一些验证,比如登录验证,是网站中的普遍需求. 对此,vue-route 提供的 beforeRouteUpdate 可以方便地实现导航守卫(navigation-guards). 导航守卫(navigation-guards)这个名字,听起来怪怪的,但既然官方文档是这样翻译的,就姑且这么叫吧. 贴上文档地址:https://router.vuejs.org/zh-cn/advanced/navigation-guards.html 全局守卫你可以使用 router.beforeEa