关于VUE路由单页面使用JQUERY第三方插件的问题？跳转过去插件部分就不起作用了
情况是这样子的。我在VUE单面面中用了一个第三方JQUERY 分页插件，在地址栏里输入 一切都是正常的，但是，我在app.vue中定义的&router-link :to="{path:'conA'}"&打开conA&/router-link&
&router-link :to="{path:'conB'}"&打开conB&/router-link&点击跳转到B页面，分页就没有了，具体请让我慢慢道来：这个是定义的地方.main.js基本就是按视频上写的映射到两个VUE组件中去。然后在app.vue里加了跳转，这步也没有毛病，也是按视频来的，点击跳的也没有问题，能加载相应的组件内容。然后我在conB.vue里加了一个分页插件，插件的写法也没有问题如果直接用URL访问 http://localhost:8080/conB
没毛病，他是这样子的效果
5.可是我用页面上的两个a标签去跳转的时候，conB页面就变成了，也不报错，也不会给我啥提示，就不显示。查看了一个DOM，标签里就是空的，啥玩意也没有。
我该怎么办，百度也找不到这方面的解释。希望慕课的大神阿，帮帮我阿。我叫 西红柿
可以加我QQ
这个问题，已经困扰我一周多了。
vue里面的页面跳转是前端跳转，不会向后台重新请求页面，页面也不会刷新，所以你那段jquery的代码并不会在vue跳转以后执行，内容当然是空的，所以你再按一遍F5东西就出来了。解决方法就是把$(function(){})里的代码写到vue的组件生命周期里。早跟你说了vue这种前端框架和jquery很别扭，要处理很多先后顺序的问题，然而你就是不听
你还没有登录，请先登录或注册慕课网帐号
最好别一起用
你还没有登录，请先登录或注册慕课网帐号
2077人关注
28448人关注
Copyright (C) 2018 imooc.com All Rights Reserved | 京ICP备 号-11VueJs路由跳转——vue-router的使用详解
转载 & & 作者：SCQ000
本篇文章主要介绍了VueJs路由跳转——vue-router的使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
对于单页应用，官方提供了vue-router进行路由跳转的处理，本篇主要也是基于其官方文档写作而成。
基于传统，我更喜欢采用npm包的形式进行安装。
npm install vue-router --save
当然，官方采用了多种方式进行安装，包括bower,cdn等。
在HTML文档中使用，只需要利用v-link这个directive就行了，如：
&a v-link="{path: '/view-a'}"&Go to view-a&/a&
​ps: v-link还支持activeClass用于指定链接活跃时的css样式。replace属性为true的时候可以让链接在跳转的时候不会留下历史记录。
而在ES5中使用，需要先创建路由器实例，随后传入配置参数即可，如：
var router = new VueRouter();
router.map({
'/view-a': {
component: ViewA
'/view-b': {
component: ViewB
router.start(App, '#app');
以上定义的路由器规则，采用映射到一个组件的方式，最后启动应用的时候，挂载到#app的元素上。
当然，如果你想采用ES6的语法进行配置，也是很容易做到的:
先建立一个路由器模块，主要进行配置和绑定相关信息
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
const router = new VueRouter(); //这里可以带有路由器的配置参数
router.map({
'/view-a': {
component: ViewA
'/view-b': {
component: ViewB
e //将路由器导出
在app.js入口启动文件中启用该路由器
import Vue from 'vue';
import router from './routers';
router.start(App, '#app');
如果想要使用嵌套路由，如/a/b则可以更新路由配置
router.map({
component: A,
subRoutes: {
component: B
同时，你需要在组件A和组件B中使用&router-view&，如：
&div id="app"&
&router-view&&/router-view&
组件A中，使用嵌套的外链
&div id="A"&
This is component A
&router-view&&/router-view&
路由器将自动渲染对应的组件以及更新路由信息。
其中&router-view&可以传递props，支持v-ref,同时也可以使用v-transition和transition-mode来获得场景切换效果，被渲染的组件将注册到父级组件的this.$对象上。
路由对象和路由匹配
路由对象，即$router会被注入每个组件中，可以利用它进行一些信息的获取。如
$route.path
当前路由对象的路径，如'/view/a'
$rotue.params
关于动态片段（如/user/:username)的键值对信息,如{username: 'paolino'}
$route.query
请求参数，如/foo?user=1获取到query.user = 1
$route.router
所属路由器以及所属组件信息
$route.matched
数组，包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。
$route.name
当前路径名字
当然，你也可以在自己定义路由规则（map)的时候自定义字段，用以特殊目的。
全匹配片段的语法是使用通配符* 如，/user/*any就会匹配到任何以/user为开头的路径，并给params对象中赋值一个属性any
动态片段的语法就是使用:作为标志。
使用路径名称
在定义路径规则的时候，如果你给它提供了一个name属性，则可以在后续使用这条路径规则的时候，直接引用。
router.map({
'/user/:userId': {
name: 'user',
component: {...}
在v-link中使用
&a v-link="{name: 'user', params: {userId: 1}"&This is a user whose id is 1&/a&
还可以使用router.go()
router.go({name: 'user', params: {userId: 1}});
最终都会匹配到/user/1这条路径上
路由选项名
将路径格式化为#!开头
启用HTML5 history模式，可以使用pushState和replaceState来管理记录
使用一个不依赖于浏览器的浏览历史虚拟管理后端。
transitionOnLoad
初次加载是否启用场景切换
saveScrollPosition
在启用html5 history模式的时候生效，用于后退操作的时候记住之前的滚动条位置
linkActiveClass
"v-link-active"
链接被点击时候需要添加到v-link元素上的class类,默认为active
如，我想采用一个有路径格式化并启用Html5 history功能的路由器，则可以在路由器初始化的时候，指定这些参数：
var router = new VueRouter({
hashbang: true,
history: true
这里只是做了一些简单的介绍，最后，更多高级用法请参考官方文档。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具总结Vue路由跳转问题的实例教程-js教程-PHP中文网QQ群微信公众号还没有收藏总结Vue路由跳转问题的实例教程本篇文章主要介绍了Vue跳转问题记录详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧最近项目上需要用Vue用来做app，在Vue中使用路由时遇到下面的问题。路由设置如下：{
path:'/tab',
component:Tab,
children:[{
path:'layoutList',
name:'LayoutList',
component:LayoutList
path:'layoutView/:layoutId',
name:'LayoutView',
component:LayoutView
path:'layoutDetail/:viewId',
name:'LayoutDetail',
component:LayoutDetail
}其中/tab是根地址，有3个子地址，3个子地址层级为：LayoutList =& LayoutView =& LayoutDetail正常情况：假设当前路由为/tab/layoutList，需要跳转到LayoutView页面，可以通过router.push({path:'layoutView/'+item.id})跳转后的路由为/tab/layoutView/1
当我想从LayoutView页面跳转到对应的LayoutDetail页面时：情况一：（找不到页面）跳转前地址：/tab/layoutView/1跳转代码：router.push({path:'layoutDetail/'+item.id});跳转后地址：/tab/layoutView/layoutDetail/27情况二：（找不到页面）跳转前地址：/tab/layoutView/1跳转代码：router.push({path:'/layoutDetail/'+item.id});跳转后地址：/layoutDetail/27情况三：（找不到页面）跳转前地址：/tab/layoutView/1跳转代码：router.push({path:'tab/layoutDetail/'+item.id});跳转后地址：/tab/layoutView/tab/layoutDetail/27情况四：（页面正常显示）跳转前地址：/tab/layoutView/1跳转代码：router.push({path:'/tab/layoutDetail/'+item.id});跳转后地址：/tab/layoutDetail/27只有按照情况四的操作，才能正常显示出来页面。vue路由会根据push的地址，如果地址不是/开头，会直接替换当前路由的最后一个/后的地址，如果地址是/开头，会以push的地址作为绝对地址进行跳转。另外我尝试还使用router.go({name:'LayoutDetail',params:{viewId:item.id}})，页面不会跳转且地址也不会改变。以上就是总结Vue路由跳转问题的实例教程的详细内容，更多请关注php中文网其它相关文章！共3篇903点赞收藏分享：.php.cn&猜你喜欢PHP中文网：独家原创，永久免费的在线，php技术学习阵地！
All Rights Reserved | 皖B2-QQ群:关注微信公众号没有更多推荐了，
不良信息举报
举报内容：
Vue---路由跳转和嵌套
举报原因：
原文地址：
原因补充：
最多只允许输入30个字
加入CSDN，享受更精准的内容推荐，与500万程序员共同成长！本文出自汗血宝马，转载时请注明出处及相应链接。
本文永久链接: http://www.caotama.com/100903.html
Ɣ回顶部