Vue之Router之parmas传参
一、文件结构同上篇一样
二、main.js上篇一样
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import router from './router'
Vue.use(VueRouter)
Vue.config.productionTip = false
new Vue({
router:router,
render: h => h(App),
}).$mount('#app')
二、router下index.js
import VueRouter from 'vue-router'
import news from '../pages/news.vue'
export default new VueRouter({
routes:[
{
name:'news',
path:'/news/:id/:title/:detail',
component:news}
]
})
变化部分
name:‘news’,
path:’/news**/:id/:title/:detail’,**
routes内路由新增name,path项路径后增加占位
三、App.vue
<template>
<div id="app">
<li v-for="n in newsList" :key="n.id">
<router-link :to="{
name:'news',
params:{
id:n.id,
title:n.title,
detail:n.detail
}
}">
{{n.title}}</router-link>
</li>
<h1>展示区</h1>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App',
data(){
return{
newsList:[
{id:'001',title:'life',detail:'I love life'},
{id:'002',title:'sport',detail:'runing... '},
{id:'003',title:'sing',detail:'singing...'}
]
}
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
变化部分
<router-link :to="{
name:‘news’,
params:{
需要路由名字name项和params.
四、news.vue
新闻细节
- id:{{$route.params.id}}
- id:{{$route.params.title}}
- id:{{$route.params.detail}}
变化只有query改成params.