vue的路由踩坑坑……之路（＜router-link/＞，＜router-view/＞）之router-link跳转时浏览器的路径是正确的，而router-view却不渲染数据？？？

为什么我的router-link跳转时浏览器的路径是正确的，而router-view却……为什么不渲染数据？？？这个问题我纠结了好几个小时。。到最后，真真真……（无语子）

先上图，看目录：

我的目录长这样

接下来我会用到这几个页面：
1，HelowWorld.vue页面（上代码）：

<template><div class="hello">你好你好你好<h1>这里是HelloWorld</h1><p>{{msg}}</p></div>
</template><script>
export default {name: 'HelloWorld',data () {return {msg: 'Welcome to HelloWorld'}}
}
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1{color: goldenrod;
}
</style>

2，A_index.vue页面：

<template><div class="hello"><h1>这里是A_index</h1><p>{{msg}}</p></div>
</template><script>
export default {name: 'HelloWorld',data () {return {msg: '欢迎A_index'}}
}
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>h1{color: brown;}
</style>

3，user.vue页面：

<template><div><h1>这里是user</h1><!-- 这里可以通过$routr.params.name来获取路由的参数 --><!-- <p>欢迎回来，{{$route.params.name}}</p> --><p>欢迎回来，{{msg}}</p></div>
</template>
<script>export default({data () {return {// msg:'欢迎A_index'msg:''}},watch:{// to表示即将要进入的那个组件，from表示从哪个组件过来的$route(to,from){this.msg = to.params.name;console.log(111);}}})
</script>

4，路由配置页：index.js页面：
（一个很鸡肋的问题，在我们定义一大堆路由的时候，用的是数组，但是那个数组的名字要是routes才行，不能是routers，这就是困扰我很多时间的一个bug，也不知道为啥。。。求大神指教，为什么是要routes才行？？？）

// 引入vue
import Vue from 'vue'
// 引入vue-router
import VueRouter from 'vue-router'// 第三方库需要use一下才能用
Vue.use(VueRouter)// 引入HelloWorld页面
import HelloWorld from '../components/HelloWorld.vue'
// 引入A_index页面
import A_index from '../views/A_index.vue'// 定义routes路由的集合，数组类型
const routes = [{path: '/HelloWorld',name: 'HelloWorld',component: HelloWorld},{path: '/A_index',name: 'A_index',component: A_index},// 有时我们的页面会有问题，就是我们第一次进去是看不到路由页面的，这是因为我们没有设置默认值，我们首次进入的时候路径是为空的，那么我们可以下面两个方法解决：// 1,配置路由重定向// {path:'',redirect: 'A_index'},// 2,重新写个路径为空的路由// {path:'',component: A_index},{path:'/user/:name',name:'user',// 这一步相当于引入import user from '../user.vue'下面是被我简写了。。component: () => import('../user.vue')}
]
// 实例化Router并将routes添加进去
const router = new VueRouter({// linkActiveClass自定义激活的class名称 可以在浏览器的f12查看router-link标签 linkActiveClass:'active',// ES6简写，等于routes:routesroutes
})
// 抛出这个实例对象方便外部读取以及访问
export default router// 上面内容也可简写成这样格式，主要还是个人习惯喽。。
// export default new Router({//   routes: [
//     {//       path: '/A_index',
//       name: 'A_index',
//       component: A_index
//     },
//     {//       path: '/HelloWorld',
//       name: 'HelloWorld',
//       component: HelloWorld
//     }
//   ]
// })

5，项目的根组件：App.vue页面：
（所有页面都是在App.vue下进行切换的。我觉得也可以理解为所有的路由也是App.vue的子组件）

<template><div id="app"><img src="./assets/logo.png"><div><!-- router-link 定义页面中点击触发部分 --><router-link to="/A_index">A_index</router-link><router-link to="/HelloWorld">HelloWorld</router-link><!-- <a href="https://www.baidu.com">去百度</a> --></div><div><router-link to="/user/xianyu">动态路由咸鱼</router-link><router-link to="/user/mengxiang">动态路由梦想</router-link></div><!-- router-view用于存放路由对应组件的地方 --><router-view></router-view></div>
</template><script>
export default {name: 'App'
}
</script><style>
#app {font-family: 'Avenir', Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>

6，项目的主入口文件：main.js页面：
（主要作用是初始化vue实例并使用需要的插件）

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
// 导入App根组件
import App from './App'
// 引用router的index.js
import router from './router/index.js'Vue.config.productionTip = false/* eslint-disable no-new */
new Vue({el: '#app',// 一定要注入到vue的实例对象上router,components: { App },template: '<App/>'
})

vue的路由踩坑坑……之路（＜router-link/＞，＜router-view/＞）之router-link跳转时浏览器的路径是正确的，而router-view却不渲染数据？？？相关推荐

VUE+TS+animate 踩的坑和基础使用方式
直接重点首先在main.ts中引入animate.css时,报错,找不到模块需要在shims-vue.d.ts中添加如下代码原因是引入第三方库或者是Vue文件,TS不知道是干嘛的,看 anima ...
使用vue.js路由踩到的一个坑Unknown custom element
在配合require.js使用vue路由的时候,遇到了路由组件报错: "vue.js:597 [Vue warn]: Unknown custom element: <router-l ...
vue动态添加路由之避坑指南
你是否遇到了: addRouter后出现白屏路由守卫出现死循环踩了很多坑之后,我终于悟到了vue动态添加路由的正确打开方式: 为了设计权限,在前端我们通常采取两种方式 1.在用户登录时获取该用户权 ...
H5跳转微信小程序-成功案例（VUE）（踩坑无数）
这里写自定义目录标题准备工作根据官方提供的资料需准备以下几点: 1.已认证的服务号 2.绑定JS接口安全域名 (在微信公众平台设置) 3.IP白名单 (在微信公众平台设置) 4.将小程序和H5公众 ...
关于light7使用路由经验总结及踩的坑
关于light7库的使用经验总结前言: 当你看到这片文章的时候相信你一时间没有找到解决的办法.因为我就是在网上百度不到相关解决的办法,所以那就静下心认真看完这片文章相信你一定会有收获的-最近在使用一 ...
vue 微信扫码登录嵌入方式及开发踩的坑点
文章目录 1. 微信扫码登录开发文档申请AppID,AppSecret,配置回调地址 2. 微信扫码登录方式 3. 微信扫码登录代码 4. 使用 href 更改内嵌的样式 5. 坑点1:redire ...
Spring Boot 从1.0 升级到 2.0 所踩的坑
先给大家晒一下云收藏的几个数据,作为一个 Spring Boot 的开源项目(https://github.com/cloudfavorites/favorites-web)目前在 Github 上面 ...
小白程序员最容易踩的“坑”，你踩过几个？
人生,就是一边踩"坑",一边上升的过程.而程序员的一生,不仅要改无数的BUG,也要越过很多的"坑".今天,下面为大家分享一些开发人员常见的"坑&quo ...
全中！七大初学者易踩的坑！
[CSDN 编者按]作为初学者,你是否有犯过不知道有现成的API,而自己重复造轮子呢?本文作者详解七大新人程序员容易犯的错,让大家吸取教训,不要重复掉入这些坑. 作者 | Daan 译者 | 弯月,责 ...

vue的路由踩坑坑……之路（＜router-link/＞，＜router-view/＞）之router-link跳转时浏览器的路径是正确的，而router-view却不渲染数据？？？

先上图，看目录：

vue的路由踩坑坑……之路（＜router-link/＞，＜router-view/＞）之router-link跳转时浏览器的路径是正确的，而router-view却不渲染数据？？？相关推荐

最新文章

热门文章