vue中路由参数的使用

最新推荐文章于 2022-11-24 14:22:41 发布

weixin_44022064

最新推荐文章于 2022-11-24 14:22:41 发布

阅读量111

点赞数

本文链接：https://blog.csdn.net/weixin_44022064/article/details/103817002

版权

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>

<body>
<div id="app">

<router-link to="/home">首页</router-link>
<router-link to="/news/1">第一条新闻</router-link>
<router-link to="/news/112">第二条新闻</router-link>
<router-link to="/news/abc">第三条新闻</router-link>

<!-- 路由出口： -->
<router-view></router-view>

</div>

const Home = {
  template: `
    <div>这是 Home 组件</div>
  `
}

const News = {
  template: `
    <div>这是 新闻 组件 --- {{ $route.params.id }}</div>
  `,

  created() {
    console.log('代码中获取路由参数：', this.$route.params.id)
  }
}

// 创建路由实例
const router = new VueRouter({
  // 配置路由规则
  routes: [
    { path: '/home', component: Home },

    // 该路由可以匹配什么样的哈希值？？？
    // 1 /news/221
    //   /news 是固定写死的， /221 正好被 /:id 匹配

    // 不能匹配：
    // 1 /news  少了 /:id 匹配的不分
    // 2 /abc   从头开始就无法匹配
    // 3 /news/123/adf  多了 /adf 这一部分
    { path: '/news/:id', component: News }
  ]
})

const vm = new Vue({
  el: '#app',
  data: {},
  // 将路由实例挂到Vue实例中
  router
})

</script>
</body>

</html>

weixin_44022064

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue中路由参数的使用

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Co...
复制链接

扫一扫