简单说说如何使用vue-router插件的方法

2020-06-13 10:31:09易采站长站整理

首先在 main.js 中配置带参数的路由规则:


const Routers = [{
...
{
path: '/article/:id',
component: (resolve) => require(['./router/views/article.vue'], resolve)
}
...
]

然后在 router/views 下新建一个 article.vue :


<template>
<div>{{$route.params.id}}</div>
</template>

<script>
export default {
name: "article",
mounted() {
console.log(this.$route.params.id);
}
}
</script>

<style scoped>

</style>

运行 npm run dev 后,在浏览器地址栏中输入 http://localhost:8080/article/123,就能访问到 article.vue 组件咯:

 

注意: 因为配置的参数路由规则是 /article/:id,即必须带 id 参数,否则是会重定向会 /index 的哦O(∩_∩)O~