Vue路由案例演示
1. 簡介
Vue.js 路由允許我們通過不同的 URL 訪問不同的內容。
通過 Vue.js 可以實現多視圖的單頁Web應用（single page web application，SPA）。
Vue.js 路由需要載入 vue-router 庫
中文文檔地址：vue-router文檔。
2. 安裝
1）直接下載
https://unpkg.com/vue-router/dist/vue-router.js2）NPM
npm install vue-router3. 案例演示
案例最終效果如下：
?
代碼結構如下：
?
main.js
/* 入口JS*/ import Vue from 'vue' import App from './App.vue' import router from './router' ? ? /* eslint-disable no-new */ new Vue({el: '#app',components: {App}, // 映射組件標簽template: '<App/>', // 指定需要渲染到頁面的模板router ?// 注冊路由器 })App.vue
<template><div><div class="row"><div class="col-xs-offset-2 col-xs-8"><div class="page-header"><h2>Router Test</h2></div></div></div> ?<div class="row"><div class="col-xs-2 col-xs-offset-2"><div class="list-group"><!--生成路由鏈接--><router-link to="/about" class="list-group-item">About</router-link><router-link to="/home" class="list-group-item">Home</router-link></div></div><div class="col-xs-6"><div class="panel"><div class="panel-body"><!--顯示當前組件--><!-- 緩存路由：默認情況下, 被切換的路由組件對象會死亡釋放, 再次回來時是重新創建的 --><!-- 加上keep-alive標簽可以緩存路由組件對象 --><keep-alive><router-view msg="abc"></router-view></keep-alive></div></div></div></div></div> </template> ? <script>export default {} </script> ? <style>.router-link-active {color: red !important;} </style>index.js
/* 路由器對象模塊*/ import Vue from 'vue' import VueRouter from 'vue-router' ? import About from '../pages/About.vue' import Home from '../pages/Home.vue' import News from '../pages/News.vue' import Message from '../pages/Message.vue' import MessageDetail from '../pages/MessageDetail.vue' ? // 聲明使用vue-router插件 /* 內部定義并注冊了2個組件標簽(router-link/router-view), 給組件對象添加了2個屬性:1. $router: 路由器2. $route: 當前路由*/ Vue.use(VueRouter) ? export default new VueRouter ({// 注冊應用中所有的路由routes: [{path: '/about',component: About},{path: '/home',component: Home,// 嵌套路由children: [{path: '/home/news',component: News},{path: 'message',component: Message,children: [{path:'detail/:id',component: MessageDetail}]},{path: '',redirect: '/home/news'}]},{path: '/',redirect: '/about'}] })About.vue
<template><div><h2>About</h2><p>{{msg}}</p><input type="text"></div> </template> ? <script>export default {props: {msg: String}} </script> ? <style> ? </style>Home.vue
<template><div><h2>Home</h2><div><ul class="nav nav-tabs"><li><router-link to="/home/news">News</router-link></li><li><router-link to="/home/message">Message</router-link></li></ul> ?<router-view></router-view></div></div> </template> ? <script>export default {} </script> ? <style> ? </style>Message.vue
<template><div><ul><!-- 相關API對象 --><!--1) this.$router.push(path): 相當于點擊路由鏈接(可以返回到當前路由界面)--><!--2) this.$router.replace(path): 用新路由替換當前路由(不可以返回到當前路由界面)--><!--3) this.$router.back(): 請求(返回)上一個記錄路由--><!--4) this.$router.go(-1): 請求(返回)上一個記錄路由--><!--5) this.$router.go(1): 請求下一個記錄路由--><li v-for="m in messages" :key="m.id"><!-- 點擊 <router-link :to="..."> 等同于調用 router.push(...) --><router-link :to="`/home/message/detail/${m.id}`">{{m.title}}</router-link><button @click="pushShow(m.id)">push查看</button><button @click="replaceShow(m.id)">replace查看</button></li></ul><button @click="$router.back()">回退</button><hr><router-view></router-view></div> </template> ? <script>export default {data () {return {messages: []}}, ?mounted () {setTimeout(() => {const messages = [{id: 1, title: 'Message001'},{id: 3, title: 'Message003'},{id: 5, title: 'Message005'}]this.messages = messages}, 1000)}, ?methods: {pushShow (id) {this.$router.push(`/home/message/detail/${id}`)}, ?replaceShow(id) {this.$router.replace(`/home/message/detail/${id}`)}}} </script> ? <style> ? </style>MessageDetail.vue
<template><ul><!-- 路由組件中讀取請求參數 --><li>id: {{$route.params.id}}</li><li>title: {{detail.title}}</li><li>content: {{detail.content}}</li></ul> </template> ? <script>const messageDetails = [{id: 1, title: 'Message001', content: 'message content00111....'},{id: 3, title: 'Message003', content: 'message content00222....'},{id: 5, title: 'Message005', content: 'message content00333....'}]export default {data() {return {detail: {}}},mounted () {// 改變當前路由組件參數數據時, 不會重新創建組件對象, mounted不會重新執行const id = this.$route.params.idthis.detail = messageDetails.find(detail => detail.id===id*1)}, ?watch: {$route: function () { // 改變當前路由組件參數數據時自動調用console.log('$route()')const id = this.$route.params.idthis.detail = messageDetails.find(detail => detail.id===id*1)}}} </script> ? <style> ? </style>News.vue
<template><ul><li v-for="(news, index) in newsArr" :key="index">{{news}}</li></ul> </template> ? <script>export default {data () {return {newsArr: ['News001', 'News002', 'News003']}}} </script> ? <style> ? </style>?
總結
- 上一篇： vue组件化编程
- 下一篇： vue element 表格使用fixe