Vue-router实际使用和js方式跳转

Posted 2023-04-15

参考技术A 1.原生方式:

2.vue-router跳转路由：

1.传递参数：在路径中标记动态参数名字 /:name

2.路由中传递参数

3.在跳转后的页面接收参数值(两种get/post)

4.追加路由(两种写法)

Vue路由相关配置

什么是路由？
　　1、在以前页面跳转使用的是超链接a标签或者js location.href，而路由是跳转切换组件的跳转方式
　　2、路由就是监听url的改变并提供相对应的组件用于展示
　　3、vue-router官方提供的路由，在vue中vue-router则为vue提供的url监听并提供组件展示的js，也是vue全家桶中的最重要知识点之一
使用
第一步：引入
　　引入vue-router
　　<script></script>标签引入
第二步：创建展示的组件
　　let news = {
　　　　template:"<h1>这是新闻页面</h1>"
　　}
第三步：创建路由规则
　　

{
　　　　//path为要监听的路径
　　　　path:"/",
　　　　//component为监听到url中是/则提供index这个组件用于展示
　　　　component:index
　　},

 

第四步：把上面创建的路由对象添加到Vue实例中

//创建路由对象
let router = new VueRouter({routes})
　　new Vue({
　　　　el:"#app",
　　data:{},
　　router
})

 

第五步：在页面上添加标签<router-view></router-view>为路由渲染组件的容器

第六步：使用<router-link></router-link>进行组件之间的跳转
　　to:与a标签中的href一样设置跳转地址、跳转路由

路由参数传递与获取

一、得值：
　　在组件中使用
　　跳转传值
　　1、<router-link to="/news?type=国际新闻">新闻</router-link>
　　<router-link to="/shopping/衣服/小红/18/西永">商品</router-link>
　　2、js控制跳转并传值
query传值用路径
this.$router.push({"path":"news",query:{type:‘国际新闻‘}})
params传值用name
this.$router.push({name:"news",params:{type:1,name:1,age:1,address:1}})
// this.$router.push("/news");
// this.$router.push({path:"/news"})
// this.$router.push({path:"/news",query:{type:‘国际新闻‘}})
this.$router.push({name:"shopping",params:{type:"鞋子",name:"二狗",age:10,address:"409"}})

this.$route得值
分为两种获取方式
params:获取动态参数在路由中以:xxx设置的参数
query:获取get传递参数路由中没有设置的参数

注意：跳转时 path跳转用query传值
跳转是 name跳转用动态传值params

嵌套路由
嵌套路由与普通路由其实没区别只是多了一个children[]包裹子路由而已
{
path:"/index",
name:"index",
component:index,
children[
{
name:"index-1",
path:"a",
component:a
},{
name:"index-1",
path:"a",
component:a
}
]
}
路由模块化
不同模块为不同的路由文件
1、需要使用一个空的组件作为承载子组件