html路由怎样做div,路由传参练习.html

Document

.new-list-container

.new-list-ul{

list-style: none;

padding: 0;

}

.new-list-container

.new-list-ul li{

border: 1px dashed hotpink;

margin: 10px 0;

}

我是列表页面

tag="li"

v-for="(item, index) in newsList"

:key="item.id"

:to="'/newsInfo?id=' + item.id">

id:{{item.id}}

标题:{{item.title}}

内容简介:{{item.container}}

这是详情页:{{$route.query.id}}----{{$route.params.id}}

//列表组件

let newListComponents = {

template:'#new-list',

data () {

return {

newsList:[

{id:1,title:'腾讯爸爸!震惊居然这样做出种事',container:"腾讯爸爸!震惊居然这样做出种事,无法让人接受!!!!!"},

{id:2,title:'腾讯爸爸!震惊居然这样做出种事',container:"腾讯爸爸!震惊居然这样做出种事,无法让人接受!!!!!"},

{id:3,title:'腾讯爸爸!震惊居然这样做出种事',container:"腾讯爸爸!震惊居然这样做出种事,无法让人接受!!!!!"},

{id:4,title:'腾讯爸爸!震惊居然这样做出种事',container:"腾讯爸爸!震惊居然这样做出种事,无法让人接受!!!!!"},

]

}

}

}

let newInfoComponents = {

template:'#new-info',

created () {

console.log(this.$route);

}

}

//new路由

let router = new VueRouter({

routes:[

//重新定向

{path:'/',redirect:'/newsList'},

{path:'/newsList',component:newListComponents},

{path:'/newsInfo',component:newInfoComponents}

//使用params 传参

//{path:'/newsInfo/:id',component:newInfoComponents}

]

})

new Vue({

el:"#app",

data:{},

methods:{},

//'router':router

router

})

一键复制

编辑

Web IDE

原始数据

按行查看

历史