vue-router

Click on link changes the url but not the content/data on page

阅读更多关于 Click on link changes the url but not the content/data on page

问题 the story: I am on product page #/product/7 and on the same page I have 4 more products that are similar to the one that is being viewed. All these products have links to their pages: router-link(:to="{ name: 'product', params: { id: product.id }}" v-text='product.title') . the problem: When I click on any of the product links, the url changes but the content remains the same. So, if I am on #/product/7 and click on #/product/8 the url only will change. If I navigate from /product/:id page

vue刷新当前路由：router-view 复用组件时不刷新的3种解决方案总结

阅读更多关于 vue刷新当前路由：router-view 复用组件时不刷新的3种解决方案总结

　　vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。　　对于路由，不同的路由跳转，vue会帮我们刷新路由，但是我今天要说的是，同一路由刷新我们的解决方法。问题背景：　　点击用户头像 => 进入用户个人中心，在用户个人中心里点击其他用户的头像，我希望显示被点击用户的个人中心，但只看到了路由参数在发生变化，页面内容并没有更新。 <script> export default { data() { return { data: {} } }, methods: { fetchDate() { // 使用 axios获取数据 ...... }, created() { this.fetchDate(); } } </script> 解决办法：　　使用 watch，观察路由，一旦发生变化便重新获取数据！ <script> export default { data() { return { data: {} } }, methods: { fetchDate() { // 使用 axios获取数据 ...... },

vue简学之路（案例十三）路由一级配置以及路由重定向

阅读更多关于 vue简学之路（案例十三）路由一级配置以及路由重定向

vue中路由的作用：根据url锚点路径，在容器中加载不同的模块，本质就是页面导航在单页面的情况下更好的前后端分离，对于用户来说如果有路由会路径会根据路由去分配，并且页面不会重新加载，因此页面更为流畅。但是他缺点在于没有多个页面给搜索引擎网页爬虫爬取，由于他会一次性加载html javascript css在初次加载的时候会慢。 vue路由引入： 1通过npm install vue-router安装（一般在项目搭建时候就会安装）我用到是这个方式 2官网下载引入配置一级路由步骤 1 定义路由组件（可以以引入的形式） const Home ={template:"<.h2>首页"} const news ={template:”<.h2>新闻”} const Hot ={template:“<.h2>热点”} 2分配路径 ocnst routes=[ {path:’/home’,component:Home}, {path:’/news’,component:News}, … ] 3 注册到router实例（创建router实例，传入‘routes’配置） const router =new VueRouter({ routes //缩写相当于 routes:routes }) 4挂载到vue的根实例,让整个应用都具有路由的功能 var vm=new Vue（{ el: ,

Vue路由参数更新但是页面不刷新问题解决

阅读更多关于 Vue路由参数更新但是页面不刷新问题解决

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 一、Vue路由参数更新但是页面不刷新问题 { path: "/static/:id", name: "static", component: () => import("./views/art/Static.vue") }, 解决方案，在当前视图组件中监听路由参数变化，来刷新数据。 //监听路由变化 watch: { $route(to, from) { if (to.params.id != from.params.id) { //加载数据 this.init(); } } }, mounted() { //加载数据 this.init(); } 更多路由文章： Vue中路由管理器Vue Router使用介绍（三） Vue中路由管理器Vue Router使用方式（二）-推荐 Vue中路由管理器Vue Router使用方式（一）来源： oschina 链接： https://my.oschina.net/tianma3798/blog/3155193

阅读更多关于 Vue-router

Vue Router是Vue.js官方的路由管理器，严格来说，它是一款插件，但它又和Vue.js核心深度集成，Vue Router的版本依赖于Vue.js的版本，最新的vue-router 3.0 依赖于Vue.js 2.0及以上版本。一　　安装Vue-router 　　 1，简介　　Vue Router 有两种模式，分别是HTML5 History模式和hash模式。我们知道，Vue.js是主要用于构建单页面应用用户界面的渐进式框架，所以hash是Vue推荐的主力模式，如果你要使用History模式，需要配合后端进行一些单独的设置。　　Vue Router 提供的主要功能包括但不限于：　　　　嵌套路由和视图；　　　　基于模块化、组件化的路由配置；　　　　路由参数、查询；　　　　简单过渡效果。　　　　　　 2，安装　　　安装Vue Router也很简单，三种方式：script标签本地引入，CDN加速，模块化开发npm安装。 1 //标签本地引入 2 <script src="/vue.js"></script> 3 <script src="/vue-router.js"></script> 4 //vue-router依赖于vue.js,序偶一要先引入vue.js 1 //CDN加速 2 <script src="https://cdn.jsdelivr

keep-alive遇见vue-router

阅读更多关于 keep-alive遇见vue-router

保证组件活着 keep-alive是vue内置的一个组件，可以使被包含的组件保留状态，避免组件重新渲染,频繁创建销毁，router-view也是一个组件，如果直接被包在keep-alive里面，所有路径匹配到的视图组件都会被缓存 keep-alive有两个非常重要的属性 include -- 字符串或正则表达，只有匹配的组件才会被缓存 exclude --字符串或正则表达，任何匹配的组件都不会被缓存 <keep-alive exclude="profile,user"> <route-view/> </keep-alive> 这两个函数只有组件使用了keep-alive时才有效 activated(){ console.log("当前组件活跃") } deactivated(){ console.log("当前组件不活跃") } 来源： 51CTO 作者：喝醉的熊链接： https://blog.51cto.com/13550695/2464461

Vue-Router: TypeError: this._router.init is not a function

阅读更多关于 Vue-Router: TypeError: this._router.init is not a function

问题 I have vue-router installed (within Laravel project), then try to use it: import VueRouter from 'vue-router' Vue.use(VueRouter) then I get this: [Vue warn]: Error in beforeCreate hook: "TypeError: this._router.init is not a function" Interestingly enough, everything was fine previously, but suddenly started getting this message. 回答1: Replace vue with vue-loader in your Webpack config https://github.com/vuejs/vue-loader/issues/409 UPDATE Okay, obviously you are not initializing the router in a

Vue-Router: TypeError: this._router.init is not a function

阅读更多关于 Vue-Router: TypeError: this._router.init is not a function

vue性能优化2--引入cdn

阅读更多关于 vue性能优化2--引入cdn

当我们加载页面时，需要将我们所需要的一些依赖加载到当前会话中然后再开始执行，如果我们首屏，模块比较多是，需要等待的时间会比较长，而且。浏览器内存最多执行四十个进程，需要等到加载完前面的才能执行后面的代码，如果我们采用cdn的方式来引入一些第三方资源，就可以缓解我们服务器的压力，原理是将我们的压力分给其他服务器点。配置首页引入这些cdn，index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="icon" href="<%= BASE_URL %>favicon.ico"> <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script> <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script> <title>mytest</title> <

Cant make router work

阅读更多关于 Cant make router work

问题 This is my router/index.js import Vue from 'vue' import Router from 'vue-router' import Home from '../views/Home' import Login from '../views/Login' Vue.use(Router) export default new Router({ //mode: 'hash', routes: [ { path: '/', component: Home }, { path: '/login', component: Login }, ] }) And this is my login view <template> <div class="page"> <p> Login </p> </div> </template> <script> export default { components: { } } </script> But anywhere I browse to, http://127.0.0.1:4000/login http:

订阅 vue-router