vue组件和路由
针对vue组件和路由这个问题，本文将综合不同朋友对这个vue两种路由的区别的知识为大家一起来解答，希望能帮到大家
本文内容目录一览：
Vue普通组件与路由组件传参
对象模式主要用于前期开发时的测试
由于普通组件和路由组件传参的形式不同，body与JavaScript中均有较大变动，现在有一种方法，在路由配置项 route 中添加 props:true , 会把params中的键值对以props的形式传入组件 中，使普通组件当做路由组件使用
单文件组件和Vue中的路由（页面跳转的实现）
路由就是根据网址的不同，返回不同的内容给用户。
入口文件main.js挂载了app这个挂载点，同时引入App组件和路由。
App.vue组件中使用router-view写入了路由，router-view使得每个页面显示的是根据路由设置当前地址所对应的内容。
以下为router目录下的index.js文件，文件写明了访问某个路径时显示哪个组件以及组件名是什么。这些组件都需要在文件头的部分进行引入。
在写每个组件的.vue文件的过程中，要在逻辑部分注明它的name，这与router/index.js中申明的组件name保持一致。
在需要实现点击跳转的元素区域使用router-link :to=" " to表示跳转到哪个页面，""内的内容按路由文件index.js配置的内容来确定格式。
下图绑定的是动态路由，:to=的内容由两部分组成。用+连接。
注：把router-link加到我们需要实现页面跳转的标签外时，会把标签内一些字体颜色改变。这是因为router-link默认是个a标签。我们可以直接用router-link包裹标签，再重新设定字体的颜色，但是其实有更好的方法。如图：把li标签直接改为router-link，然后在router-link内加入tag="li"，这样就可以解决字体颜色变化的问题了。
除了使用上述两种方法，还可以使用router的实例方法实现页面跳转。“ ”中写法与router/index.js中定义的形式保持一致。
用在函数中方式如下：
Vue路由的使用
路由允许我们通过不同的URL去访问不同的内容，该URL可以是我们自己设置的，在项目中并没有这样的文件夹，这种功能就是路由
路由的本质是hash值
定：定义路由组件
配：配置路由
实：实例化路由
挂：挂载路由
路由（vue-router）的基本作用就是将每个路径映射到对应的组件，通过修改路由进行组件之间的转换
常规路径规则为在当前路径后面加上"/path"，path即为设定的前端路由路径
跳转到上一次的页面：this.$router.go(-1);
指定跳转的地址：this.$router.replace("/path");
指定跳转的路由名字下：this.$router.replace({name:"menuLink"});
通过push进行跳转:this.$router.push("/path");
或this.$router.push({name:"path"});
（1）设置一个默认展示组件，（不推荐！！！）
{path:"/",component:login}
(2) 路由redirect重定向，设置默认组件
{path:"/",redirect:"login"}
（1）创建一个路由对象，当导入vue-router包之后，在window全局对象之中就有一个路由的构造函数VueRouter
（2）在new路由对象的时候可以传递一个配置对象，这个配置对象的route表示路由器的匹配规则
（3）每个路由规则都是一个对象，这个规则对象身上必须有两个属性
属性1：path表示监听那个路由的链接地址
属性2：component表示如果路由是前面匹配到的path，则展示component属性对应的组件，
component属性值必须是一个组件模板对象，不能是组件的引用名称
（4）router：routerObj将路由规则对象，注册到VM实例上，用来监听URL地址的变化，然后展示对应的组件
（5）使用vue官方提供的router-link元素使用它，默认渲染成一个a标签，router-link to="login"登录/router-link
（6）在控制的div中（App.Vue）使用router-view/router-view
Vue 何时适合用组件？何时适合用路由？
router:根据不同的地址跳转到不同的页面
一、vue-router的使用
1.下载路由模块 npm vue-router --save
2.在router.js中
先引入路由 import Router from 'vue-router'
接着通过use在vue全局注册使用 Vue.use（Router）
最后将路由表导出 export default new router({ })
3.在main.js中引入路由组件 import router from './router'
4.以参数的形式写到根目录中 在vue实例对象中声明router
5.最后在App.vue的模板中设置路由出口 router-view/router-view
二、添加组件步骤：
1.在src的components下添加组件 apple.vue
2.在app.vue的script标签
引入 新添的组件 import apple from './componets/apple'
在data后注册每个组件 components:{apple}
在template标签里用组件名写一个标签apple/apple
3.通过命令npm run dev 运行项目查看组件是否添加成功
三、将组件添加到路由表的步骤：
1.安装路由 npm install vue-router --save
2.将components里的组件引入配置到router.js中
先引入组件 import...
再配置路由路径
3.在main.js中使用router
先引入路由 import...
再在vue实例中指定router
4.在App.vue中模板中添加路由链接 router-link和出口router-view
vue组件和路由的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于vue两种路由的区别、vue组件和路由的信息别忘了在本站进行查找喔。
