vue-router

vue 路由懒加载 resolve vue-router配置

阅读更多关于 vue 路由懒加载 resolve vue-router配置

使用方法 component:resolve => require(['@/pages/About'],resolve) 懒加载 router/index.js import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) export default new Router({ mode:'history', routes: [ { path:'/', redirect:'/index' }, { path: '/about', name: 'About', component:resolve => require(['@/pages/About'],resolve) }, { path: '/index', name: 'Index', component:resolve => require(['@/pages/Index'],resolve) }, { path: '/product', name: 'Product', component:resolve => require(['@/pages/Product'],resolve) } ] }) 非懒加载 router/index.js import Vue from 'vue' import Router from 'vue-router'

vue mint-ui 使用及其错误解决

阅读更多关于 vue mint-ui 使用及其错误解决

Use npm install -g vue -cli vue init webpack projectname 测试时： npm run dev 打包时： npm run build vue-router 1、配置 Router 用 vue-cli 创建的初始模板里面，并没有 vue-router，需要通过 cnpm 安装 cnpm i vue -router -D 2、在 router.js 中引入所需的组件，创建 routers 对象 import Vue from 'vue' import Router from 'vue-router' import StartPage from '@/components/StartPage' import Index from '@/components/Index' Vue.use(Router) export default new Router({ routes: [ { path: '/' , name: 'StartPage' , component: StartPage }, { path: '/index' , name: 'Index' , component: Index } ] }) 3、路由使用使用映射路由 < router -link to = "/index" >< /router -link >

vue-router beforeEach钩子，next('/login') 跳转问题

阅读更多关于 vue-router beforeEach钩子，next('/login') 跳转问题

在使用vue-router beforeEach钩子时，你也许会遇到如下问题：源码： router.beforeEach((to, from, next) => { //判断登录状态简单实例 var userInfo = window.localStorage.getItem( 'token' ); if (userInfo) { next(); } else { next( '/login' ); } }) 然后你会发现出现如下错误：出现dead loop错误解决方案： router.beforeEach((to, from, next) => { var userInfo = window.localStorage.getItem( 'token' ); //获取浏览器缓存的用户信息 if (userInfo){ //如果有就直接到首页咯 next(); } else { if (to.path== '/login' ){ //如果是登录页面路径，就直接next() next(); } else { //不然就跳转到登录； next( '/login' ); } } }) 解决思路：排除此时地址 = 转向的地址的情况，避免dead loop, 问题很简单，但一不小心就入坑了文章来源: vue-router beforeEach钩子，next('/login')

vue-router的另一种写法

阅读更多关于 vue-router的另一种写法

今天看视频,看到了vue-route的另一种写法,0.7.13版本的写法,上古版本,好像写老版本没多大意义,但感觉做下对比还是能加深一下印象. 导入,use和创建实例都没变 : import VueRouter from 'vue-router'; Vue.use(VueRouter) ; router =new VueRouter(); 但是创建路由规则的时候变了: 新写法是创建实例时,将路由规则定义为一个routes数组,包含在一个对象传入route实例: 而在0.7.13版本中,是使用了route实例的一个map()方法,传入一个对象, 当然,上古版本跟新版本在许多地方都不同,不仅仅是这点. 就是为了好玩!! 文章来源: vue-router的另一种写法

vue-router报错：RangeError: Maximum call stack size exceeded

阅读更多关于 vue-router报错：RangeError: Maximum call stack size exceeded

今天在运行本地项目的时候，vue-router报错：RangeError: Maximum call stack size exceeded，当时发现自己在run dev的时候，命令行里面是没有任何问题的，在进入界面的时候，也不跳转，后面去看了自己配置的路由，找到解决方法首先，我的正常路由配置 { path: '*', redirect: '/userhome', }, { path: '/firstshopping', component: firstshopping }, { path: '/allshopping', component: allshopping }, 这里都是没有问题的，问题出在拦截配置 router.beforeEach((to, from, next) => { if (to.matched.some(res => res.meta.requireAuth)) { if (sessionStorage.getItem('sessiontoken')) { console.log(1111) next() } else { console.log(22222) next({ path: '/login', query: { redirect: to.fullPath } }) } } else { next() } }) 我浏览器输入的结果

vue-router中$route 和 $router

阅读更多关于 vue-router中$route 和 $router

1.1 $route 表示(当前路由信息对象) 表示当前激活的路由的状态信息，包含了当前 URL 解析得到的信息，还有 URL 匹配到的 route records（路由记录）。路由信息对象：即$router会被注入每个组件中，可以利用它进行一些信息的获取。 1 1. $route . path ** 2 字符串，对应当前路由的路径，总是解析为绝对路径，如 "/foo/bar" 。 3 2. $route . params ** 4 一个 key / value 对象，包含了动态片段和全匹配片段， 5 如果没有路由参数，就是一个空对象。 6 3. $route . query ** 7 一个 key / value 对象，表示 URL 查询参数。 8 例如，对于路径 / foo ? user = 1 ，则有 $route . query . user == 1 ， 9 如果没有查询参数，则是个空对象。 10 4. $route . hash ** 11 当前路由的 hash ֵ (不带 #) ，如果没有 hash 值，则为空字符串。锚点 12 5. $route . fullPath ** 13 完成解析后的 URL ，包含查询参数和 hash 的完整路径。 14 6. $route . matched ** 15 数组

vue项目中使用vue-router

阅读更多关于 vue项目中使用vue-router

要使用vue-router,首先需要在项目根目录的package.json中添加依赖接着使用npm install 下载对应的依赖包，当然也可以直接 npm install vue-router --save-dev 安装引入vue-router 来源：博客园作者：日暮途远i 链接：https://www.cnblogs.com/rmty/p/11420131.html

Vue入门十一、路由的使用

阅读更多关于 Vue入门十一、路由的使用

一、vue-router使用 1、下载npm i vue-router -S 2、安装插件Vue.use(VueRouter) 3、创建路由对象 var router = new VueRouter() 4、配置路由规则 router.addRoutes([路由对象]) 路由对象{path:'锚点', component:需要显示的组件} 5、将配置好的路由对象交给Vue 6、使用组件<router-view></router-view> 二、代码示例方法一、 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script type="text/javascript" src="vue.js"></script> <script type="text/javascript" src="vue-router.js"></script> <div id="app"></div> <script type="text/javascript"> var Login = { template: ` <div>登陆成功</div> ` } // 安装路由 Vue.use(VueRouter); // 创建路由 var router = new

阅读更多关于 Vue-router

SPA 现在的应用都流行单页面，在用户通过某些操作后更改地址url后，动态的进行不同模版内容的无刷新切换，用户体验更好。在vue中使用官方提供的vue-router来配置单页，通过url的变化，触发hashchange事件进行路由之间的切换（卸载和安装） ajax请求，通过路由，页面不会整体重载 Router 基础 vue 路由的mode(模式)有几种，分别是什么？在那些环境下运行？ hash （mode默认），使用 URL hash 值来作路由。支持所有包括不支持 HTML5 History Api 的浏览器。直接使用a标签 <a href="#/home"></a> history : 依赖 H5 History API 和服务器配置。【需要后端支持，后端需要配置】 <router-link to=""> Vue提供，to跳转 </router-link> abstract : 支持所有 JavaScript 运行环境，如 Node.js 服务器端。如果发现没有浏览器的 API，路由会自动强制进入这个模式。使用步骤安装 npm i vue-router -S 在src目录下创建一个 router 目录，里面创建一个 index.js 文件，这个目录是放 router 模块用的在 index.js 内引入第三方的依赖包, 并注册路由。分别引入自定义组件

vue - 前端面试题

阅读更多关于 vue - 前端面试题

1，active-class 是哪个组件的属性？嵌套路由怎么定义？答：vue-router 模块的 router-link 组件。 2，怎么定义 vue-router 的动态路由？怎么获取传过来的动态参数？答：在路由的 path 属性上加上【/:id】。获取：router.params.id。 3，vue-router 有哪几种导航钩子？答：（1）全局导航钩子：beforeEach()、afterEach() （2）路由独享组件：beforeEnter() （3）组件内的钩子：beforeRouteEnter()、beforeRouteUpdate()、beforeRouteLeave() 4，scss 是什么？使用步骤是？有那几大特性？（1）预处理 css，把 css 当成函数编写，定义变量，嵌套（2）npm 下三个 loader （sass-loader、css-loader、node-sass）; 在 build 文件夹下 webpack.base.conf.js 文件，在module 中添加规则 { test: /.sass 变量名称=值）； 2，可以嵌套 5，mint-ui是什么？怎么使用？至少说出三个组件的使用方法？答：（1）基于 vue 的前端组件库。npm 安装，然后 import 样式和js，Vue.use(mintUI)全局引入。（2

订阅 vue-router