2024年Web前端最新Vue（七）SPA单页面应用，web前端开发贴吧

最后

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

最后写上我自己一直喜欢的一句名言：世界上只有一种真正的英雄主义就是在认清生活真相之后仍然热爱它

this.$router.push(“/相对路径”)

（3）路由跳转传参

a.配置路由字典中的路由字典项；

{ path:“/相对路径/:变量名”, component: 页面组件对象名, props:true}

//:变量名 表示为上个页面传到下个页面的值起一个变量名，便于重复使用

//props:true 让地址栏中的上个页面传来的值，自动掉入下一个页面的props中成为一个外来属性/变量

b.跳转时携带参数值到下个页面；

//或者

this.$router.push(“/相对路径/参数值”)

//路由传参，在路由字典项的path中定义变量时必须加:

//但在跳转时传参时既不用加:也不用加变量名，写参数值即可

c.在下个页面中直接使用props中外部传来的变量。

props:[ “变量名” ]

如下：

---

举例：实现单页面应用(以上述文件结构为基础)；

index.html

views/Index.js

var Index = {

template: `

这里是首页

<button @click=“goto(1)”>查看1号商品详情

<button @click=“goto(5)”>查看5号商品详情

<button @click=“goto(13)”>查看13号商品详情

`,

methods: {

goto(lid) {

// 程序中自动跳转

this.$router.push(‘/detail/${lid}`)

}

}

}

views/Detail.js

var Detail = {

props: [“lid”],

template: `

这里是详情页

显示{{lid}}商品的详细信息...

`

}

views/NotFound.js

var NotFound = {

template: `

404:嘿！走到哪儿了！

`

}

router/index.js

var routes = [{

path: “/”, //用户运行后直接进入首页

component: Index

},

{

path: “/detail/:lid”,

component: Detail,

props: true

},

{

path: “*”, //除输入正确之外的所有情况

component: NotFound

}

];

var router = new VueRouter({

routes

});

components/MyHeader.js

var MyHeader = {

template: `

这里是页头

• 首页
• 详情页

• ---

  `

  }

  效果如下：

  在首页时，首页高亮显示；

  

  点击第一个按钮； 
  
  最后

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  最后写上我自己一直喜欢的一句名言：世界上只有一种真正的英雄主义就是在认清生活真相之后仍然热爱它