前端框架Vue（2）——Vue-Router 路由跳轉
1、最簡單：html+js全在一個檔案中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>動態路由匹配</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head 2、命名路由 用name屬性連結地址
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>命名路由</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<h1>Hello App!</h1>
<p>
<!-- 使用router-link 元件來導航 -->
<!-- 通過傳入 'to' 屬性指定連結 -->
<!-- <router-link>預設會渲染成一個a標籤 -->
<router-link :to="{name:'user',params:{id:123}}">GO TO FOO</router-link>
<router-link :to="{name:'user',params:{id:456}}">GO TO BAR</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的元件將會被渲染到這裡 -->
<router-view></router-view>
</div>
<script>
// 1、定義元件
const Foo = {template:'<div>foo</div>'};
const Bar = {template:'<div>bar</div>'};
const User = {
template:'<div>User {{$route.params.id}}</div>',
}
// 2、定義路由
// 每一個路由對映一個元件
// 3、建立router例項，然後傳'routes'配置
const router = new VueRouter({
routes:[
{
path:'/user/:id',
name:'user',
component: User
}
]
});
// 4、建立和掛載根例項
const app = new Vue({
router
}).$mount('#app');
</script>
</body>
</html>3、巢狀路由
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>路由巢狀</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<h1>Hello App!</h1>
<p>
<!-- 使用router-link 元件來導航 -->
<!-- 通過傳入 'to' 屬性指定連結 -->
<!-- <router-link>預設會渲染成一個a標籤 -->
<router-link to="/user/foo/profile">GO TO FOO</router-link>
<router-link to="/user/bar/posts">GO TO BAR</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的元件將會被渲染到這裡 -->
<router-view></router-view>
</div>
<script>
// 1、定義元件
/*const Foo = {template:'<div>foo</div>'};
const Bar = {template:'<div>bar</div>'};*/
const User = {
template:'<div class="user">' +
'<h2>User {{$route.params.id}}</h2>' +
'<router-view></router-view>' +
'</div>'
}
const UserProfile = {
template:'<div>profile</div>'
}
const UserPosts = {
template:'<div>posts</div>'
}
// 2、定義路由
// 每一個路由對映一個元件
// 3、建立router例項，然後傳'routes'配置
const router = new VueRouter({
routes:[
{path:'/user/:id',component: User,
children:[
{
//當/user/:id/profile匹配成功
//UserProfile會被渲染在User的<router-view>
path:'profile',
component:UserProfile
},
{
path:'posts',
component:UserPosts
}
]
}
]
});
// 4、建立和掛載根例項
const app = new Vue({
router
}).$mount('#app');
</script>
</body>
</html>4、命名檢視
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>命名檢視</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<h1>Hello Views!</h1>
<ul>
<li>
<router-link to="/">/</router-link>
</li>
<li>
<router-link to="/other">/other</router-link>
</li>
</ul>
<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>
</div>
<script>
const Header = {template:'<div>頭部</div>'}
const Section = {template:'<div>中間部分</div>'}
const Footer = {template:'<div>尾部</div>'}
const router = new VueRouter({
mode:'history',
routes:[
{
path:'/',
//redirect:'/other',//重定向
components:{
default:Header,
a:Section,
b:Footer
}
},
{
path:'/other',
components:{
default:Footer,
a:Section,
b:Header
}
}
]
})
new Vue({
router,
el:'#app'
})
</script>
</body>
</html>*當使用 Vue-cli 時如何進行 vue-router 路由跳轉
如果沒有使用vue-cli開發環境，請移步
http://blog.csdn.net/docallen/article/details/68490256
專案目錄結構：
1、npm 安裝 vue-router
cnpm install vue-router --save2、首先建上圖結構中的3個元件,寫點內容即可
3、配置 router.js 檔案
import Vue from 'vue'
import VueRouter from 'vue-router'
import Hello from '../component/Hello.vue'
import firstPage from '../pages/firstPage.vue'
import secondPage from '../pages/secondPage.vue'
Vue.use(VueRouter)
export default new VueRouter({
routes:[
{
path:'/',
name:'Hello',
component:Hello
},
{
path:'/first',
name:'first',
component:firstPage
},
{
path:'/second',
name:'second',
component:secondPage
}
]
})4、修改 APP.vue 中的 template
<template>
<div id="app">
<img src="./assets/logo.png">
<div class="nav-list">
<router-link class="nav-item" to="/">首頁</router-link>
<router-link class="nav-item" to="/first">頁面一</router-link>
<router-link class="nav-item" to="/second">頁面二</router-link>
</div>
<div>
<router-view></router-view>
</div>
</div>
</template>5、修改 main.js
引入router.js
import router from './router/router.js'修改 Vue 例項
new Vue({
el: '#app',
router,
render: h => h(App)
})
相關推薦
前端框架Vue（2）——Vue-Router 路由跳轉
1、最簡單：html+js全在一個檔案中 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>動
[Android]如何做一個崩潰率少於千分之三噶應用app（22）-元件化路由跳轉
大家好，我是蒼王。以下是我這個系列的相關文章，有興趣可以參考一下，可以給個喜歡或者關注我的文章。 大家應該有看完我的第十二編簡書的頁面跳轉會清楚跨module的跳轉用Android原生來做是，需要使用隱式跳轉完成。 但是原生跳轉方式是有很多的侷限性的。這裡借用AR
Vue-router（2）之簡單路由
在 vue 中使用 vue-router 1、安裝匯入並註冊路由模組： 執行 npm i vue-router -S 安裝路由模組 在 index.js 中匯入並註冊路由模組 // 匯入路由模組 import VueRouter from 'vue-route
前端框架Vue（13）——vue 中如何對公共css、 js 方法進行單檔案統一管理，全域性呼叫
1、前言 最近，為公司開發交付的一個後臺管理系統專案，我使用了 Vue 框架進行開發實踐。 模組化、元件化、工程化的開發體驗非常好。良好的 api，優雅的設計，對於工程師非常友好。 但是由於模組比較多，我對於每個模組分配了不同的
前端框架Vue（16）——vue-i18n ，vue專案中如何實現國際化
一、前言 趁著10月的最後一天，來寫一篇關於前端國際化的實踐型部落格。國際化應該都不陌生，就是一個網站、應用可以實現語言的切換。 在這就不談原理，只說說如何實現中英文的切換。做技術的總得先把 demo 做出來嘛。 二、demo 場景需求分析
前端框架Vue（3）—— vue.resource 、axios、ajax 非同步通訊
vue 中如何支援非同步請求 1、vue 支援開發者引入 jquery 使用 $.ajax() 1、首先，在 package.json 中新增 jQuery，然後 npm install "dependencies": { "jquery":
Vue 2.x框架完善（二）—— vue路由按模組配置
1. 寫在前面 關於 vue-router 的相關文件： 1. vue-router 官方文件 2. 網上很多優秀的教程，請自行百度。 3. 專案demo程式碼。github 2 路由按模組配置 通常我們將路由寫在 /src/router/ind
前端框架Vue（5）——Vue+Echarts
Echarts 是資料視覺化中佼佼者！推薦大家可以玩一玩，非常實用！ 如果第一次接觸Echarts的同學，這邊有我以前寫過的一篇入門：淺談Echarts3.0 Vue+Echarts 現附上程式碼： <template&g
前端筆記之Vue（七）Vue-router&axios&Vue外掛&Mock.js&cookie|session&加密
一、Vue-router（路由） 1.1路由建立 官網：https://router.vuejs.org/zh/ 用 Vue.js + Vue Router 建立單頁應用，是非常簡單的。使用 Vue.js ，我們已經可以通過組合元件來組成應用程式，當你要把 Vue Router 新增進來，我們需要做的是，將元
VUE - 在axios中使用router進行跳轉（二次鑑權）
前言：在課程設計中，做一個許可權控制，這裡前端我是簡單的用sessionStorage做判斷，但是一般來說前端後臺的狀態並非時刻一致的，例如阿里雲，你不操作五六分鐘，再去執行操作就會提示你需要重新登入了。所以需求就是當我發一個請求給後臺，後臺返回一個碼告訴我需要登入，因為這是一個重複操作
Vuejs——（2）Vue生命週期，資料，手動掛載，指令，過濾器
原教程： http://cn.vuejs.org/guide/instance.html http://cn.vuejs.org/guide/syntax.html 本博文是在原教程的基礎上加上例項，並嘗試說明的更詳細。 （十）Vue例項的生命週期 如圖：（我自己翻
Vue.js學習總結（2）——Vue.js2.X + ElementUI開發環境搭建
一、開發前準備： Vue專案通常通過webpack工具來構建，而webpack命令的執行是依賴node.js的環境的，所以首先要安裝node.js。(官方地址：https://nodejs.org/e
Vue（2）- v-model、局部組件和全局組件、父子組件傳值、平行組件傳值
star component handle lec 開發 div 復制 line 定義 一、表單輸入綁定（v-model 指令） 可以用 v-model 指令在表單 <input>、<textarea> 及 <select> 元素上
學齋隨筆，初九潛龍勿用，-44關於Vue（2）
標簽 自定義 文本格式 指示 結束 must component 就是 插值 Vue.js 允許自定義過濾器，可被用作一些常見的文本格式化。 過濾器可以用在兩個地方：mustache 插值和 v-bind 表達式。過濾器應該被添加在 JavaScript 表達式的尾
web前端面試總結（2）
10.27 面試總結與分享(清宇網路) 面試問題 自我介紹 nodejs靜態伺服器路由前端使用Nodejs來寫的麼 整個專案實現的思路，都實現了哪些模組 使用nigix代理解決埠問題 對於地圖的使用，有沒有用過地圖自定義的東西 使用vue的時間，
MapReduce框架學習（2）——Map/Reduce及 Shuffle前後
參考： JeffreyZhou的部落格園 《Hadoop權威指南》第四版 0 Map/Reduce大致流程 輸入（input）： 將輸入資料分成一個個split，並將spilt進一步拆成<
基於springboot2 框架整合（2）：druid資料來源整合
前言 專案中使用了很多現成的框架，都是專案經理、架構師帶來的，從來沒有自己整合過！這次決定自己從零開始整合一次，以學習鞏固。過程中參考很多開源框架的思路，工具類等，若有侵權，請速速聯絡，一定妥善處理 一：簡介 druid是alibaba開源的資料庫連線池，號
python web框架學習（2）——建立Django專案
Django 帶有一個名為 django-admin.py 的工具，如果使用的是 Windows 系統，它會安裝到 Scripts 資料夾下，該資料夾位於 Python 安裝目錄 下 ， 如 C:\Python27\Scripts 。對於 Windows 系統，需要手
百度前端面試經驗（2）
補充上文： 又想到了一些當時問到的問題： 一面中補充： 1.是否會使用firebug除錯，通常怎麼除錯，對於js設定斷點怎麼做？ 2.在頁面優化問題上如何壓縮程式碼，怎麼用前端方法實現 二面中補充： 1.如何將程式碼部署到線上 2.作品中的圖片用的是什麼格式，png有幾
DWR3.0框架入門（2） —— DWR的伺服器推送
1.修改MessagePush中的send方法：package sugar.dwr; import java.util.Collection; import org.directwebremoting.Browser; import org.directwebremoting.ScriptBuffer;