路由router
-
vue-router組件
基本使用
<script src="vue.min.js"></script>
<script src="vue-router.min.js"></script>
</head>
<body>
<div id="app">
<!--這個是vue-router提供的,建議用這個-->
<router-link to="/news">新聞</router-link>
<router-link to="/mine">我的</router-link>
<!--路由的佔位 相當於angular 的ng-view-->
<router-view></router-view>
</div>
<script>
//組件 新聞資訊
var news = Vue.component('my-news', {
template: '<p>歡迎來到新聞列表</p>'
})
//組件 我的分享
var share = Vue.component('my-mine', {
template: '<p>歡迎來到我的頁面</p>'
})
//創建路由
var router = new VueRouter({
routes: [
{name: 'news', path: '/news', component: news},
{name: 'mine', path: '/mine', component: mine}
]
})
var vm = new Vue({
el: '#app',
//使用路由對象
router: router
})
</script>
獲取路由參數
<script src="vue.min.js"></script>
<script src="vue-router.min.js"></script>
</head>
<body>
<div id="app">
<router-link to="/news/15">新聞</router-link>
<router-link to="/mine">我的</router-link>
<!-- 路由匹配到的組件將渲染在這裏 -->
<router-view></router-view>
</div>
<script>
//組件 新聞資訊
var news = Vue.component('my-news', {
data() {
return {
id: -1
}
},
//當組件創建完畢之後
created() {
//獲取路由參數
this.id = this.$route.params.id
},
template: '<p>我是新聞資訊列表 {{id}}</p>'
})
//組件 圖片分享
var share = Vue.component('my-mine', {
template: '<p>我是圖片分享的列表</p>'
})
//創建路由
var router = new VueRouter({
routes: [
{name: 'news', path: '/news/:id', component: news},
{name: 'mine', path: '/mine', component: mine}
]
})
var vm = new Vue({
el: '#app',
//使用路由對象
router: router
})
</script>