标签：vue 15 默认 link 组件 router 路由
vue-router的安装、使用
认识vue-router
目前流行的前端三大框架：
Vue、React、Angular都有自己的路由实现。
- vue-router基于路由和组件实现
- 路由用于设定访问路径，将路径与组件映射起来
- vue-router适合用于构建单页面应用。页面路径的改变就是组件的切换。
安装-router
安装vue-router
- 在创建项目是勾选安装vue-router
- 在终端输入命令：
npm install vue-router --save
配置vue-router
-
在src中创建router文件夹，router文件夹下创建index.js，配置路由相关信息
-
在index.js中导入vue-router，通过vue.use安装vue-router插件
-
配置路由和组件之间的应用关系
-
创建路由对象，配置映射关系，并导出路由对象
-
挂载路由对象到vue实例上
在main.js中
vue-router配置模板
index.js
//导入vue、vue-router
import Vue from 'vue'
import vueRouter from 'vue-router'
// 安装vue-router插件
Vue.use(vueRouter)
// 配置路由与组件之间的映射关系
const routes= [
{
path: '/xxx',
component: xxx
}
];
// 创建路由对象
export default new vueRouter({
// 配置映射关系
routes: routes
})
使用vue-router
步骤
-
创建对应组件，一个url对应一个组件
-
配置路由映射：组件和url映射关系
-
（第一种跳转方法）通过router-link、router-view标签使用路由
router-link：vue-router内置的组件，会被渲染为一个a标签。
router-view：根据当前的路径，动态渲染对应的组件。一般顶部的标签、导航，底部的版权信息等和router-view处于同一等级。
路由切换时，谢欢的是router-view挂载的组件，其他内容不变。
效果：
路由的默认路径
默认情况下，只有点击对应的router-link，router-view中才会显示对应组件。
但进入某网站时默认自动渲染首页内容，省去手动点击
解决办法：设置默认路径，并重定向到首页
{
//path配置根路径'/'
path: '',//或path:'/',
//重定向
redirect: '/home'
}
效果：打开网页默认显示home页面
设置history模式
改变路径有两种方法：
-
url的hash
默认使用url的hash方法
-
HTML5的history
设置为history模式的方法：
在router对象中，设置mode为history
效果：
router-link的属性
-
to：指定跳转路径
-
tag：指定router-link被渲染成什么效果
默认被渲染为a标签
-
replace：无法保存历史记录，点击回退按钮，无法回退到上一个历史页面
默认用的pushState，即可以回退页面。
使用replace属性
-
active-class
当router-link对应的路由匹配成功时，自动给当前元素设置一个class（默认为router-link-active）使用active-class可以将‘router-link-active’更名（在标签中添加该属性更名）
active-class="xxx"
简化写法：创建的在路由实例中添加linkActiveClass属性
linkActiveClass: 'xxx'
补充
-
（第二种跳转方法）在方法中通过vue-router封装好的$router实现路由跳转
初始状态
效果：replace同replaceState
push同pushState
标签：vue,15,默认,link,组件,router,路由 来源： https://blog.csdn.net/weixin_44836362/article/details/116794847
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。