vue-router

laravel+vue结合使用

阅读更多关于 laravel+vue结合使用

SegmentFault 首页问答专栏讲堂圈子发现搜索立即登录免费注册在 SegmentFault，学习技能、解决问题每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。免费注册立即登录 Laravel 中使用 Vue 组件化开发（配置） javascript php jcc 2016年08月18日发布赞 | 8 收藏 | 83 14.7k 次浏览更多请关注 Laravel.so 、 PIGJIAN BLOG 现今前端组件化开发、 MVVM 模式，给开发带来了很多的便利，可读性、可维护性更高。然而自 Laravel 5.3 开始， VueJS 成为框架默认的标配。本文基于 Laravel 5.1 LTS 版本引入 Vue 2.0 进行配置。我已在 Github 配置好， Laravel 5.1 和 Laravel 5.2 均有， Clone 下来后按照 README 安装依赖后即可用： https://github.com/jcc/vue-laravel-example 步骤一：配置 package.json 1. 在根目录下修改 package.json , 可在 devDependencies 下配置你所需的所有依赖。我的配置如下： { "private": true, "scripts

[前端] VUE基础 (6) (v-router插件)

阅读更多关于 [前端] VUE基础 (6) (v-router插件)

一、v-router插件 1.v-router插件介绍 v-router是vue的一个核心插件，vue+vue-router主要用来做SPA（单页面应用）的。什么是SPA：就是在一个页面中，有多个页签，我们选择页签显示不同的内容，但页面不跳转。例如：在网易云音乐的主页中，发现音乐、我的音乐、朋友这三个页签就是单页面应用。当我们切换他们时，可以观察到url的变化：这里看到的url改变（路由改变）的路由是vue-router提供的，而不是对应django的路由系统（前后端分离的项目，django只提供API的路由）。 2.下载vue-router vue-router官方文档： https://router.vuejs.org/zh/ 下载vue-router.js： https://unpkg.com/vue-router/dist/vue-router.js 由于vue-router是依赖vue.js库的，所以要先引入vue.js： <script src="./static/vue.js"></script> <script src="./static/vue-router.js"></script> 二、vue-router使用 1.使用vue-router实现页签切换 66 来源： https://www.cnblogs.com/leokale-zz/p

Vue router does not render/mount root path component

阅读更多关于 Vue router does not render/mount root path component

问题 i am making a page with vue , vue-router and laravel , the problem, when i enter in localhost/myproject/public_html/ , the Home component is not rendered in the router-view , if i click in the router link to the Service component, it render the content normally, and when i click to the home path it render the home component content, so why this happens? this is my app.js structure import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) import App from './views/App' import

Pass var to vue router in meta

阅读更多关于 Pass var to vue router in meta

问题 I have a route created with vue-router. { path: '/events/:id', component: Event, name: 'Event', meta: { title: 'Design Web' } }, In "meta", I give it the name of my page. I can call the title of my page by doing this: $route.meta.title But now, I'm facing a problem. In the title of my page, I would like to pass a variable (the name of my event). meta: { title: $nameOfEvent } How to do ? Thank you 回答1: It is possible if you define the title attribute as a function : { meta: { title: route => {

Vue前端路由（Vue-router）

阅读更多关于 Vue前端路由（Vue-router）

1.路由的概念路由的本质就是一种对应关系，比如说我们在url地址中输入我们要访问的url地址之后，浏览器要去请求这个url地址对应的资源。那么url地址和真实的资源之间就有一种对应的关系，就是路由。路由分为前端路由和后端路由 1).后端路由是由服务器端进行实现，并完成资源的分发 2).前端路由是依靠hash值(锚链接)的变化进行实现后端路由性能相对前端路由来说较低，所以，我们接下来主要学习的是前端路由前端路由的基本概念：根据不同的事件来显示不同的页面内容，即事件与事件处理函数之间的对应关系前端路由主要做的事情就是监听事件并分发执行事件处理函数 2.前端路由的初体验前端路由是基于hash值的变化进行实现的（比如点击页面中的菜单或者按钮改变URL的hash值，根据hash值的变化来控制组件的切换）核心实现依靠一个事件，即监听hash值变化的事件 window.onhashchange = function(){ //location.hash可以获取到最新的hash值 location.hash } 前端路由实现tab栏切换： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial

Dynamically choose compontent in Nuxt Router

阅读更多关于 Dynamically choose compontent in Nuxt Router

问题 I would like to render the same component for all languages. The translation will be done inside the component. The url and component relationship should look like so: pseudocode: browserurl: "/blogpost_1" nuxtcomponent: "blogpost_1" browserurl: "/en/blogpost_1" nuxtcomponent: "blogpost_1" browserurl: "/randompage" nuxtcomponent: "randompage" browserurl: "/en/randompage" nuxtcomponent: "randompage" My approach was to do the following, unfortunately i cant find a way to access pathMatch.

前端路由原理及vue-router介绍

阅读更多关于前端路由原理及vue-router介绍

前端路由原理本质就是监听 URL 的变化，然后匹配路由规则，显示相应的页面，并且无须刷新。目前单页面使用的路由就只有两种实现方式 hash history www.test.com/##/ 就是 Hash URL，当 ## 后面的哈希值发生变化时，不会向服务器请求数据，可以通过 hashchange 事件来监听到 URL 的变化，从而进行跳转页面。 vue-router hash实现源码（完整源码访问https://github.com/vuejs/vue-router/blob/dev/src/history/hash.js#L22-L54）： ** * 添加 url hash 变化的监听器 */ setupListeners () { const router = this.router /** * 每当 hash 变化时就解析路径 * 匹配路由 */ window.addEventListener('hashchange', () => { const current = this.current /** * transitionTo: * 匹配路由 * 并通过路由配置，把新的页面 render 到 ui-view 的节点 */ this.transitionTo(getHash(), route => { replaceHash(route.fullPath) }) })

Vue(十)---路由

阅读更多关于 Vue(十)---路由

Vue.js 路由允许我们通过不同的 URL 访问不同的内容。通过 Vue.js 可以实现多视图的单页Web应用（single page web application，SPA）。需要引入vue-router.js <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <div id="app"> <div class="menu">  <router-link to="/user">用户管理</router-link> <router-link to="/product">产品管理</router-link> <router-link to="/order">订单管理</router-link> </div> <div class="workingRoom">  <router-view></router-view> </div> </div> <script> /* * 申明三个模板(

浅入深出Vue：路由

阅读更多关于浅入深出Vue：路由

路由的概念在计算机界中的历史大概可以追溯到 OSI模型中的数据链路层与网络层中的定义。这里的定义大意是：在转发数据包时，根据数据包的目的地址进行寻址，从而将数据包发往指定的目的地。在 Web开发中同样存在着路由的概念，在各式各样的前端 mvvm框架出来之前，普遍存在于后端。通俗的说法也就是 [module/]controller/action 的组合，将 url映射到指定的 action 中处理。现在在前端中同样存在着路由这一概念。为什么需要路由在以往的前端开发中，通常没有路由这一概念，这样就造成一个问题：前端是离散的，不可独立的（静态页面除外，它不需要上下文）。脱离了后端的前端无法较好的构建一个完整系统，当然也有一些比较优秀的方案：单页应用，采用 ajax控制 dom节点以及动态修改页面内容等等。但不可否认的是，在没有路由这一概念的情况下，前端确实显得不够灵活，跳转页面时随处可见的路径硬编码。url 即物理路径。为了完善前端开发，在后来的框架中，均引入了路由、控制器、视图等后端概念。借鉴成熟的东西来完善自身，这是非常便捷的一种方式。因此在现在的前端开发中，路由也是必不可少的一环了。很多人被它的概念弄的晕头转向，让我们捋一捋，看看它的真面目。路由是什么前端中的路由更好理解。以 vue 举例， vue-router 会解析 url

阅读更多关于 vue-router

1. 动态路由匹配：当使用路由参数时，例如从 /user/foo 导航到 /user/bar ，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。解决方法：方法一： watch（监测变化） $route 对象； const User = { template: '...', watch: { '$route' (to, from) { // 对路由变化作出响应... } } } 方法二：beforeRouteUpdate 守卫； const User = { template: '...', beforeRouteUpdate (to, from, next) { // react to route changes... // don't forget to call next() } } 2. 嵌套路由：（ https://blog.csdn.net/github_26672553/article/details/54861174 ）　 const User = { template: ` <div class="user"> <h2>User {{ $route.params.id }}</h2> <router-view></router-view> </div> ` }

订阅 vue-router