本文详细介绍了Vue Router的使用，包括如何创建路由实例、定义路由规则、使用router-view和router-link展示和跳转页面。同时，文章还探讨了通过query和params两种方式传递参数，并展示了动态路由的配置与数据传递，是学习Vue应用中路由管理的重要参考资料。
目录
1.路由的使用
1.创建路由实例 new VueRouter
2.定义路由匹配规则 routes:[{path:"",name:""，component:""}]
3.在vue实例中注册路由
4.使用router-view来展示路由所对应的组件
5.router-link 组件进行路由跳转或者使用this.$router.push()进行路由跳转
例如：
<body>
<div id="box">
<router-link to='/index'>首页</router-link> // router-link可以进行路由跳转，to属性表示将要跳转的路由地址，跳转后router-view就展示跳转到的这个路径对应的组件
<router-link to='/news'>新闻</router-link>
<router-link to='/about'>关于</router-link>
<button @click='jumpit'>点击跳转首页</button> // 使用this.$router.push()进行路由跳转
<router-view></router-view> // router-view用来展示路由所对应的组件
</div>
<template id="index">
<div>
<h1>首页</h1>
</div>
</template>
<template id="news">
<div>
<h1>新闻页面</h1>
</div>
</template>
<template id="about">
<div>
<h1>关于企业页面</h1>
</div>
</template>
</body>
<script src="../vue.js"></script>
<script src="../vue-router.js"></script> //引入路由文件
<script>
let index={
template:'#index'
}
let news={
template:'#news'
}
let about={
template:'#about'
}
let router1 = new VueRouter({ // 创建路由实例
routes:[
{
name:'showindex', // name是路由名称
path:'/', // 设置访问路径
component:index // 当前路由对应展示的组件
},
最低0.47元/天 解锁文章
扫一扫
2199
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
