vue續集2
1.前端路由
1.1爲何作單頁面應用
（1）傳統的開發方式 url改變後，立馬發送請求，響應整個頁面，有可能資源過多，傳統開發會讓前端的頁面出現 「白屏」 用戶體驗很差 （2）SPA 單頁面應用 ： 錨點值的改變後，不會馬上發送請求，而是在某個合適的時機，發送ajax請求，局部改變頁面中的數據,頁面不馬上跳轉用戶體驗好
1.2前端路由的原理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
SPA : Single Page Application
前端路由
1.錨點值 監視
2.ajax獲取動態的數據
3.核心點是錨點值的改變
前端中 vue|react|angular 都很適合作單頁面應用
-->
<a href="#/login">登陸頁面</a>
<a href="#/register">註冊頁面</a>
<div id="app">
</div>
<script type="text/javascript">
// onhashchange 事件 url上的錨點數據（#/xxx改變）
var oDiv = document.getElementById('app');
window.onhashchange = function(){
console.log(location.hash);
// 根據不一樣的錨點值，對頁面不一樣的切換。
switch (location.hash) {
case '#/login':
oDiv.innerHTML = '<h2>登陸頁面</h2>';
break;
case '#/register':
oDiv.innerHTML = '<h2>註冊頁面</h2>';
break;
default:
// statements_def
break;
}
}
</script>
</body>
</html>
1.3vue-router的基本使用
npm init --yes npm install vue-router --save
1.4vue-router集成
它是vue中核心插件 1. 下載vue-router npm init --yes npm install vue-router --save - 引入vue-router的模塊 默認會拋出一個VueRouter對象 另外還有兩個全局的組件router-link 和router-view 2. Vue.use(VueRouter) 3. 建立路由對象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.min.js"></script>
<!-- 1.引入 vue-router的對象 -->
<script type="text/javascript" src="./node_modules/vue-router/dist/vue-router.js"></script>
<!-- 全局的VueRouter對象 vue-router 還給我們提供了兩個全局的組件 router-link router-view-->
<script type="text/javascript">
// 2.讓Vue使用該VueRouter建立
Vue.use(VueRouter);
var Login = {
template:`
<div>登陸頁面</div>
`
};
var Register = {
template:`
<div>註冊頁面</div>
`
};
// 3.建立一個路由對象
var router = new VueRouter({
// 配置路由對象
routes:[
{
path:'/login',
component:Login
},
{
path:'/register',
component:Register
}
]
});
var App = {
template:`
<div>
<!--router-link默認會被渲染成a標籤 to屬性默認會被渲染成href屬性-->
<router-link to="/login">登陸頁面</router-link>
<router-link to="/register">註冊頁面</router-link>
<!--路由組件的出口-->
<router-view></router-view>
</div>
`
};
new Vue({
el:'#app',
components:{
App
},
router,
template:`<App />`
});
</script>
</body>
</html>
1.5命名路由
給當前的配置路由信息對象設置name:'login'屬性
:to = "{name:'login'}"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.min.js"></script>
<!-- 1.引入 vue-router的對象 -->
<script type="text/javascript" src="./node_modules/vue-router/dist/vue-router.js"></script>
<!-- 全局的VueRouter對象 vue-router 還給我們提供了兩個全局的組件 router-link router-view-->
<script type="text/javascript">
// 2.讓Vue使用該VueRouter建立
Vue.use(VueRouter);
var Login = {
template:`
<div>登陸頁面</div>
`
};
var Register = {
template:`
<div>註冊頁面</div>
`
};
// 3.建立一個路由對象
var router = new VueRouter({
// 配置路由對象
routes:[
{
path:'/login',
name:'login',
component:Login
},
{
path:'/register',
name:'register',
component:Register
}
]
});
var App = {
template:`
<div>
<!--router-link默認會被渲染成a標籤 to屬性默認會被渲染成href屬性-->
<router-link :to="{name:'login'}">登陸頁面</router-link>
<router-link :to="{name:'register'}">註冊頁面</router-link>
<!--路由組件的出口-->
<router-view></router-view>
</div>
`
};
new Vue({
el:'#app',
components:{
App
},
router,
template:`<App />`
});
</script>
</body>
</html>
1.6路由範式----路由參數之params,query
(1)xxxx.html#/user/1
配置路由對象中
{
path:'/user/:id',
component:User
}
<router-link :to = "{name:'user',params:{id:1}}"></router-link>
(2)xxxx.html#/user?userId = 1
{
path:'/user'
}
<router-link :to = "{name:'user',query:{id:1}}"></router-link>
在組件內部經過this.$route 獲取路由信息對象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.min.js"></script>
<!-- 1.引入 vue-router的對象 -->
<script type="text/javascript" src="./node_modules/vue-router/dist/vue-router.js"></script>
<!-- 全局的VueRouter對象 vue-router 還給我們提供了兩個全局的組件 router-link router-view-->
<script type="text/javascript">
// 路由範式
// (1)xxxx.html#/user/1 params
// (2)xxxx.html#/user?userId = 2 query
// 2.讓Vue使用該VueRouter建立
Vue.use(VueRouter);
var UserParams = {
template:`
<div>我是用戶1</div>
`,
created(){
console.log("用戶1this.$route--------",this.$route);
console.log("用戶1this.$route.params.userId--------",this.$route.params.userId);
// 發送ajax請求
console.log("this.$router--------",this.$router);
}
};
var UserQuery = {
template:`
<div>我是用戶2</div>
`,
created(){
console.log("用戶2this.$route--------",this.$route);
// 發送ajax請求
console.log("用戶2this.$router--------",this.$router);
}
};
// 3.建立一個路由對象
var router = new VueRouter({
// 配置路由對象
routes:[
{
// 動態的路由參數 以冒號開頭
path:'/user/:userId',
name:'userp',
component:UserParams
},
{
path:'/user',
name:'userq',
component:UserQuery
}
]
});
var App = {
template:`
<div>
<!--router-link默認會被渲染成a標籤 to屬性默認會被渲染成href屬性-->
<router-link :to="{name:'userp',params:{userId:1}}">用戶1</router-link>
<router-link :to="{name:'userq',query:{userId:2}}">用戶2</router-link>
<!--路由組件的出口-->
<router-view></router-view>
</div>
`
};
new Vue({
el:'#app',
components:{
App
},
router,
template:`<App />`
});
</script>
</body>
</html>
1.7編程式導航
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.min.js"></script>
<!-- 1.引入 vue-router的對象 -->
<script type="text/javascript" src="./node_modules/vue-router/dist/vue-router.js"></script>
<!-- 全局的VueRouter對象 vue-router 還給我們提供了兩個全局的組件 router-link router-view-->
<script type="text/javascript">
// 路由範式
// (1)xxxx.html#/user/1 params
// (2)xxxx.html#/user?userId = 2 query
// 2.讓Vue使用該VueRouter建立
Vue.use(VueRouter);
var UserParams = {
template:`
<div>我是用戶1</div>
`,
created(){
console.log("用戶1this.$route--------",this.$route);
console.log("用戶1this.$route.params.userId--------",this.$route.params.userId);
// 發送ajax請求
console.log("this.$router--------",this.$router);
}
};
var UserQuery = {
template:`
<div>我是用戶2</div>
`,
created(){
console.log("用戶2this.$route--------",this.$route);
// 發送ajax請求
console.log("用戶2this.$router--------",this.$router);
}
};
// 3.建立一個路由對象
var router = new VueRouter({
// 配置路由對象
routes:[
{
// 動態的路由參數 以冒號開頭
path:'/user/:userId',
name:'userp',
component:UserParams
},
{
path:'/user',
name:'userq',
component:UserQuery
}
]
});
var App = {
template:`
<div>
<button @click = 'paramsHandler'>用戶1</button>
<button @click = 'queryHandler'>用戶2</button>
<!--路由組件的出口-->
<router-view></router-view>
</div>
`,
methods:{
paramsHandler(){
// 編程式導航
this.$router.push({ name: 'userp', params: { userId: 123 }})
},
queryHandler(){
this.$router.push({ name: 'userq', query: { userId: 321 }})
}
}
};
new Vue({
el:'#app',
components:{
App
},
router,
template:`<App />`
});
</script>
</body>
</html>
1.8嵌套路由
一個router-view 嵌套另一個router-view
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.min.js"></script>
<!-- 1.引入 vue-router的對象 -->
<script type="text/javascript" src="./node_modules/vue-router/dist/vue-router.js"></script>
<!-- 全局的VueRouter對象 vue-router 還給我們提供了兩個全局的組件 router-link router-view-->
<script type="text/javascript">
// 嵌套路由：
// 需求：進入首頁以後 點擊 音樂 /home/music 電影 /home/movie
Vue.use(VueRouter);
var Home = {
template: `
<div>
<br />
<router-link to = '/home/music'>音樂</router-link>
<router-link to = '/home/movie'>電影</router-link>
<!--子路由組件的出口-->
<router-view></router-view>
</div>
`
};
var Music = {
template: `
<div>我是音樂</div>
`
};
var Movie = {
template: `
<div>我是電影</div>
`
};
// 3.建立一個路由對象
var router = new VueRouter({
// 配置路由對象
routes: [{
path: '/',
// redirect:{name:'home'}
redirect: '/home'
},
{
// 動態的路由參數 以冒號開頭
path: '/home',
//這裏不能使用別名，會報警告
// name:'home',
component: Home,
children: [
// 動態路由匹配 表示你的子組件中的結構是不一樣的
// 當訪問/home時，Home組件的出口是不會渲染任何內容，這是由於沒有匹配到合適的子路由
{
path: '',
component: Music
},
{
path: 'music',
component: Music,
},
{
path: 'movie',
component: Movie
}
]
}
]
});
var App = {
template: `
<div>
<router-link to = "/home">首頁</router-link>
<!--路由組件的出口-->
<router-view></router-view>
</div>
`
};
new Vue({
el: '#app',
components: {
App
},
router,
template: `<App />`
});
</script>
</body>
</html>
1.9動態路由匹配
// 共同的子組件
var ComDesc = {
data() {
return {
msg: ''
}
},
template: `
<div>
我是{{msg}}
</div>
`,
created() {
// alert(1);
this.msg = 'andorid';
},
watch: {
// 提醒一下，當使用路由參數時，例如從 /user/foo 導航到 /user/bar，原來的組件實例會被複用。
//由於兩個路由都渲染同個組件，比起銷燬再建立，複用則顯得更加高效。不過，這也意味着組件的生命週期鉤子不會再被調用。
'$route' (to, from) {
// 對路由變化做出響應...
console.log("to------------------", to);
console.log("from------------------", from);
this.msg = to.params.id;
}
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.min.js"></script>
<!-- 1.引入 vue-router的對象 -->
<script type="text/javascript" src="./node_modules/vue-router/dist/vue-router.js"></script>
<!-- 全局的VueRouter對象 vue-router 還給我們提供了兩個全局的組件 router-link router-view-->
<script type="text/javascript">
// 嵌套路由：
// 需求：進入首頁以後 點擊 音樂 /home/music 電影 /home/movie
Vue.use(VueRouter);
var Timeline = {
template: `
<div>
<router-link :to = "{name:'comDesc',params:{id:'android'}}">Android</router-link>
<router-link :to = "{name:'comDesc',params:{id:'frontend'}}">前端</router-link>
<router-view></router-view>
</div>
`
};
var Pins = {
template: `
<div>
我是沸點
</div>
`
};
// 共同的子組件
var ComDesc = {
data() {
return {
msg: ''
}
},
template: `
<div>
我是{{msg}}
</div>
`,
created() {
// alert(1);
this.msg = 'andorid';
},
watch: {
// 提醒一下，當使用路由參數時，例如從 /user/foo 導航到 /user/bar，原來的組件實例會被複用。
//由於兩個路由都渲染同個組件，比起銷燬再建立，複用則顯得更加高效。不過，這也意味着組件的生命週期鉤子不會再被調用。
'$route' (to, from) {
// 對路由變化做出響應...
console.log("to------------------", to);
console.log("from------------------", from);
this.msg = to.params.id;
}
}
}
// 3.建立一個路由對象
var router = new VueRouter({
// 配置路由對象
routes: [{
// 動態的路由參數 以冒號開頭
path: '/timeline',
component: Timeline,
children: [{
path: "",
component: ComDesc
},
{
path: '/timelin/:id',
name: 'comDesc',
component: ComDesc
}
]
},
{
// 動態的路由參數 以冒號開頭
path: '/pins',
name: 'pins',
component: Pins,
}
]
});
var App = {
template: `
<div>
<router-link to = "/timeline">首頁</router-link>
<router-link to = "/pins">沸點</router-link>
<!--路由組件的出口-->
<router-view></router-view>
</div>
`
};
new Vue({
el: '#app',
components: {
App
},
router,
template: `<App />`
});
</script>
</body>
</html>
1.10keep-alive
<keep-alive>
<router-view></router-view>
</keep-alive>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.min.js"></script>
<!-- 1.引入 vue-router的對象 -->
<script type="text/javascript" src="./node_modules/vue-router/dist/vue-router.js"></script>
<!-- 全局的VueRouter對象 vue-router 還給我們提供了兩個全局的組件 router-link router-view-->
<script type="text/javascript">
// 嵌套路由：
// 需求：進入首頁以後 點擊 音樂 /home/music 電影 /home/movie
Vue.use(VueRouter);
var Timeline = {
template: `
<div>
我是首頁
</div>
`,
created() {
console.log('首頁組件建立了');
},
mounted() {
console.log('首頁組件DOM加載了')
},
destroyed() {
console.log('首頁銷燬了');
}
};
var Pins = {
template: `
<div>
<h3 @click = 'clickHandler'> 我是沸點</h3>
</div>
`,
methods: {
clickHandler(e) {
e.target.style.color = 'red';
}
},
created() {
console.log('沸點組件建立了');
},
mounted() {
console.log('沸點組件DOM加載了')
},
destroyed() {
console.log('沸點銷燬了');
}
};
// 3.建立一個路由對象
var router = new VueRouter({
// 配置路由對象
routes: [{
// 動態的路由參數 以冒號開頭
path: '/timeline',
component: Timeline
},
{
// 動態的路由參數 以冒號開頭
path: '/pins',
name: 'pins',
component: Pins,
}
]
});
var App = {
template: `
<div>
<router-link to = "/timeline">首頁</router-link>
<router-link to = "/pins">沸點</router-link>
<!--路由組件的出口-->
<keep-alive>
<router-view></router-view>
</keep-alive>
</div>
`
};
new Vue({
el: '#app',
components: {
App
},
router,
template: `<App />`
});
</script>
</body>
</html>
1.11路由meta實現權限控制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.min.js"></script>
<!-- 1.引入 vue-router的對象 -->
<script type="text/javascript" src="./node_modules/vue-router/dist/vue-router.js"></script>
<!-- 全局的VueRouter對象 vue-router 還給我們提供了兩個全局的組件 router-link router-view-->
<script type="text/javascript">
// 嵌套路由：
// 需求：進入首頁以後 點擊 音樂 /home/music 電影 /home/movie
Vue.use(VueRouter);
// 導航欄上 有首頁 智能題庫 登陸退出 四個按鈕
// 用戶訪問首頁時 看到的是首頁的內容
// 1.當用戶訪問智能題庫時，此時咱們檢測用戶是否有權限訪問該智能題庫的內容，
// 若是沒有 檢測用戶是否登陸過，若是沒有，則跳轉登陸頁面，登陸完成以後。
// 在localStroage中通存儲該用戶的用戶名和密碼，而且馬上跳轉到智能題庫頁面
// 2.當用戶點擊黜退，該用戶直接刪除
var Home = {
template: `
<div>
我是首頁
</div>
`
};
var Questionbank = {
template: `
<div>
我是題庫
</div>
`
};
// 登陸組件
var Login = {
data(){
return {
name:'',
pwd:''
}
},
template:`
<div>
<input type="text" v-model = 'name' />
<input type="text" v-model = 'pwd' />
<input type="button" value = '登陸' @click = 'loginHandler'/>
</div>
`,
methods:{
loginHandler(){
alert(1);
// 要登陸了
// 存儲用戶名會被密碼 保存到 localStorage 而後跳轉相應的路由（智能題庫）
localStorage.setItem('user', {name:this.name,pwd:this.pwd});
// 編程式導航
this.$router.push({name:'questionbank'});
}
}
};
// 3.建立一個路由對象
var router = new VueRouter({
// 配置路由對象
routes: [{
// 動態的路由參數 以冒號開頭
path: '/home',
component: Home
},
{
// 動態的路由參數 以冒號開頭
path: '/questionbank',
name: 'questionbank',
component: Questionbank,
// 給將來的路由 作權限控制
meta:{
// 代表訪問該組件時須要登陸
auth: true
}
},
{
path:'/login',
component:Login
}
]
});
// 全局的導航守衛
router.beforeEach(function(to,from,next){
console.log(to.meta.auth);
console.log(from);
// 若是不調用next 那麼頁面會卡主
if(to.meta.auth){
// 用戶點擊了智能題庫的導航 該用戶未登陸，須要登陸判斷
if (localStorage.getItem('user')) {
// 不爲空 放行
next()
}else{
// 爲空 進入登陸頁面
next({path:'/login'});
}
}else{
// 直接放行
next();
}
});
var App = {
template: `
<div>
<router-link to = "/home">首頁</router-link>
<router-link to = "/questionbank">智能題庫</router-link>
<router-link to = '/login'>登陸</router-link>
<a href="javascript:void(0)" @click = 'clear'>退出</a>
<!--路由組件的出口-->
<keep-alive>
<router-view></router-view>
</keep-alive>
</div>
`,
methods:{
clear(){
// 退出
localStorage.removeItem('user');
this.$router.push('/login');
}
}
};
new Vue({
el: '#app',
components: {
App
},
router,
template: `<App />`
});
</script>
</body>
</html>
相關文章
- 1. Gitlab 持續集成/部署2——持續集成Vue項目
- 2. vue續集3
- 3. vue續集1
- 4. vue續集4
- 5. lambda續集——2
- 6. restful-framwork續集2
- 7. 上傳webshell（sqlmap續集2）
- 8. 持續集成--Jenkins--2
- 9. vue(2) - 收藏集 - 掘金
- 10. jmeter-2-ant+jenkins持續集成測試
- 更多相關文章...
- • Thymeleaf擴展2(Say Hello) - Thymeleaf 教程
- • Scala Set(集合) - Scala教程
- • ☆技術問答集錦（13）Java Instrument原理
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 跳槽面試的幾個實用小技巧，不妨看看！
- 2. Mac實用技巧 |如何使用Mac系統中自帶的預覽工具將圖片變成黑白色?
- 3. Mac實用技巧 |如何使用Mac系統中自帶的預覽工具將圖片變成黑白色?
- 4. 如何使用Mac系統中自帶的預覽工具將圖片變成黑白色?
- 5. Mac OS非兼容Windows軟件運行解決方案——「以VMware & Microsoft Access爲例「
- 6. 封裝 pyinstaller -F -i b.ico excel.py
- 7. 數據庫作業三ER圖待完善
- 8. nvm安裝使用低版本node.js(非命令安裝)
- 9. 如何快速轉換圖片格式
- 10. 將表格內容分條轉換爲若干文檔
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. Gitlab 持續集成/部署2——持續集成Vue項目
- 2. vue續集3
- 3. vue續集1
- 4. vue續集4
- 5. lambda續集——2
- 6. restful-framwork續集2
- 7. 上傳webshell（sqlmap續集2）
- 8. 持續集成--Jenkins--2
- 9. vue(2) - 收藏集 - 掘金
- 10. jmeter-2-ant+jenkins持續集成測試