欧美色AA,九九只有精品

vue-router前端路由

完整的基礎(chǔ)篇筆記PDF下載，完全手打有用的話請(qǐng)給個(gè)贊唄Thanks?(?ω?)?

路由的基本概念

本質(zhì)

路由本質(zhì)是對(duì)應(yīng)關(guān)系

路由分類

后端路由

概念：根據(jù)用戶的URL請(qǐng)求返回不同內(nèi)容
本質(zhì)：URL請(qǐng)求地址與服務(wù)器資源之間的對(duì)應(yīng)關(guān)系

前端路由

概念：根據(jù)不用的用戶事件，顯示不用的頁(yè)面內(nèi)容
本質(zhì)：用戶事件和事件處理函數(shù)之間的對(duì)應(yīng)關(guān)系

實(shí)現(xiàn)簡(jiǎn)單的前端路由

基于URL中的hash實(shí)現(xiàn)（點(diǎn)擊菜單的時(shí)候改變URL的hash，根據(jù)hash的變化控制組件的切換）

window.onhashchange = function(){
    console.log(location.hash);
}

Demo

<body>
    <div id="app">
        <a href="#/zhuye">主頁(yè)</a>
        <a href="#/keji">科技</a>
        <a href="#/caijing">財(cái)經(jīng)</a>
        <a href="#/yule">娛樂(lè)</a>
        
        <!-- 組件占位符 -->
        <component :is="comName"></component>
    </div>
    <script>
        const zhuye = {
            template: '<h1>主頁(yè)信息</h1>'
        }
        const keji = {
            template: '<h1>科技信息</h1>'
        }
        const caijing = {
            template: '<h1>財(cái)經(jīng)信息</h1>'
        }
        const yule = {
            template: '<h1>娛樂(lè)信息</h1>'
        } 
        const vm = new Vue({
            el: '#app',
            data: {
                comName: 'zhuye'
            },
            components: {
                zhuye,
                keji,
                caijing,
                yule
            }

        });
        
        //監(jiān)聽(tīng)頁(yè)面hash值的變化
        window.onhashchange = function(){
            vm.comName = location.hash.slice(2);
        }
         
    </script>
</body>

vue-router的基本使用

Vue.js官方的路由器，和Vue.js核心深度集成

功能

支持H5的歷史模式和hash模式
支持嵌套路由
支持路由參數(shù)
支持編程式路由
支持命名路由

使用步驟

引入相關(guān)庫(kù)文件

<!-- 引入vue.js -->
<script src="js/vue.js"></script>
<!-- 引入vue-router.js -->
<script src="js/vue-router.js"></script>

添加路由鏈接

<!-- router-link 默認(rèn)渲染為a標(biāo)簽 -->
<!-- to 屬性渲染為href -->
<!-- to 屬性的值渲染為#開(kāi)頭的hash地址 -->
<router-link to="/user">User</router-link>

添加路由填充位

<!-- 路由填充位也稱為路由占位符 -->
<!-- 將來(lái)通過(guò)路由規(guī)則匹配到的組件，將會(huì)被渲染到 router-view 所在位置-->
<router-view></router-view>

定義路由組件

var User = {
    template: '<h1>User</h1>'
}
var Register = {
    template: '<h1>Register</h1>'
}

配置路由規(guī)則并創(chuàng)建路由實(shí)例

const router = new VueRouter({
    //存放路由規(guī)則的數(shù)組
    routes: [
        //每個(gè)路由規(guī)則是一個(gè)配置對(duì)象，至少包含path和component兩個(gè)屬性
        //path: 當(dāng)前路由規(guī)則匹配的hash地址
        //component： 便是當(dāng)前路由規(guī)則對(duì)應(yīng)的組件
        {path:'/user',component: User},
        {path: '/register',component: Register}
    ]
})

把路由掛載到Vue實(shí)例中

const vm = new Vue({
    el: '#app',
    data: {
        comName: 'zhuye'
    },
    //配置
    //router: router 對(duì)應(yīng)一致時(shí)可以簡(jiǎn)寫(xiě)
    router

});

路由重定向

用戶在訪問(wèn)地址A的時(shí)候，強(qiáng)制用戶跳轉(zhuǎn)到地址C，從而展示特定頁(yè)面

默認(rèn)進(jìn)入頁(yè)面地址為：http://127.0.0.1:5500/index.html#/

希望進(jìn)入: http://127.0.0.1:5500/index.html#/user

使用redirect屬性配置

const router = new VueRouter({
    //存放路由規(guī)則的數(shù)組
    routes: [
        //每個(gè)路由規(guī)則是一個(gè)配置對(duì)象，至少包含path和component兩個(gè)屬性
        //path: 當(dāng)前路由規(guī)則匹配的hash地址
        //component： 便是當(dāng)前路由規(guī)則對(duì)應(yīng)的組件
        {path: '/', redirect: '/user'},
        {path:'/user',component: User},
        {path: '/register',component: Register}
    ]
})

vue-router嵌套路由

分析

點(diǎn)擊父級(jí)路由鏈接顯示模板內(nèi)容
模板內(nèi)容內(nèi)容中又有自己路由鏈接
點(diǎn)擊子級(jí)路由鏈接顯示子級(jí)模板內(nèi)容

步驟

創(chuàng)建父級(jí)路由鏈接和父級(jí)路由填充位

<router-link to="/user">User</router-link>
<router-link to="/register">Register</router-link>

<!-- 路由填充位也稱為路由占位符 -->
<!-- 將來(lái)通過(guò)路由規(guī)則匹配到的組件，將會(huì)被渲染到 router-view 所在位置-->
<router-view></router-view>

定義路由組件

var User = {
    template: '<h1>User 組件</h1>'
}
var Register = {
    template:  `
            <div>
                <h1>Register 組件</h1>
                <hr/>
                <router-link to="/register/tab1">Tab1</router-link>
                <router-link to="/register/tab2">Tab2</router-link>

                <!-- 子路由填充位 -->
                <router-view></router-view>
            </div>`
}
var Tab1 = {
    template: '<h2>Tab1</h2>'
}
var Tab2 = {
    template: '<h2>Tab1</h2>'
}

嵌套路由配置

const router = new VueRouter({
    //存放路由規(guī)則的數(shù)組
    routes: [
        //每個(gè)路由規(guī)則是一個(gè)配置對(duì)象，至少包含path和component兩個(gè)屬性
        //path: 當(dāng)前路由規(guī)則匹配的hash地址
        //component： 便是當(dāng)前路由規(guī)則對(duì)應(yīng)的組件
        {path: '/', redirect: '/user'},
        {path:'/user',component: User},
        {
            path: '/register',
            component: Register,
            //嵌套子路由
            children: [
                 {path: '/register/tab1',component: Tab1},
                 {path: '/register/tab2',component: Tab2}
            ]
        }
    ]
})

Vue實(shí)例中掛載router

const vm = new Vue({
    el: '#app',
    data: {
        comName: 'zhuye'
    },
    //配置
    //router: router 對(duì)應(yīng)一致時(shí)可以簡(jiǎn)寫(xiě)
    router

});

vue-router動(dòng)態(tài)匹配路由

基本用法

 const router1 = new VueRouter({
     routers: [
         //動(dòng)態(tài)路由路徑參數(shù) 冒號(hào)開(kāi)頭
         {path: '/user/:id',component: User}
     ]
 })

組件中獲取id值

const User = {
    //通過(guò) $route.params 獲取參數(shù)
    template: '<div>User {{ $route.params.id }}</div>'
}

Demo

路由鏈接和路由填充位

<router-link to="/user/1">User1</router-link>
<router-link to="/user/2">User2</router-link>
<router-link to="/user/3">User3</router-link>

<!-- 路由填充位也稱為路由占位符 -->
<!-- 將來(lái)通過(guò)路由規(guī)則匹配到的組件，將會(huì)被渲染到 router-view 所在位置-->
<router-view></router-view>

組件

const User = {
    //通過(guò) $route.params 獲取參數(shù)
    template: '<div>User {{$route.params.id}} 組件</div>'
}

定義路由實(shí)例

const router = new VueRouter({
    //存放路由規(guī)則的數(shù)組
    routes: [
        //每個(gè)路由規(guī)則是一個(gè)配置對(duì)象，至少包含path和component兩個(gè)屬性
        //path: 當(dāng)前路由規(guī)則匹配的hash地址
        //component： 便是當(dāng)前路由規(guī)則對(duì)應(yīng)的組件
        {path: '/', redirect: '/user'},
        //動(dòng)態(tài)路由路徑參數(shù) 冒號(hào)開(kāi)頭
        {path:'/user/:id',component: User},
    ]
})

Vue實(shí)例中掛載router

const vm = new Vue({
    el: '#app',
    data: {

    },
    //配置
    //router: router 對(duì)應(yīng)一致時(shí)可以簡(jiǎn)寫(xiě)
    router

});

傳參方式

$route.params : 與對(duì)應(yīng)路由高度耦合，不靈活
props：組件和路由解耦

props 使用

定義props的值為布爾類型

const router = new VueRouter({
    //存放路由規(guī)則的數(shù)組
    routes: [
        //每個(gè)路由規(guī)則是一個(gè)配置對(duì)象，至少包含path和component兩個(gè)屬性
        //path: 當(dāng)前路由規(guī)則匹配的hash地址
        //component： 便是當(dāng)前路由規(guī)則對(duì)應(yīng)的組件
        //props 值設(shè)置為true route.params 將會(huì)被設(shè)置為組件屬性
        {path: '/', redirect: '/user'},
        //動(dòng)態(tài)路由路徑參數(shù) 冒號(hào)開(kāi)頭
        {path:'/user/:id',component: User, props: true},
    ]
})

組件獲取使用props獲取屬性

 const User = {
     //使用props獲取路由參數(shù)
     props: ['id'],
     //通過(guò) $route.params 獲取參數(shù)
     template: '<div>User {{ id }} 組件</div>'
 }

props還可以是一個(gè)對(duì)象

const router = new VueRouter({
    //存放路由規(guī)則的數(shù)組
    routes: [
        //每個(gè)路由規(guī)則是一個(gè)配置對(duì)象，至少包含path和component兩個(gè)屬性
        //path: 當(dāng)前路由規(guī)則匹配的hash地址
        //component： 便是當(dāng)前路由規(guī)則對(duì)應(yīng)的組件
        //props 值設(shè)置為true route.params 將會(huì)被設(shè)置為組件屬性
        {path: '/', redirect: '/user'},
        //動(dòng)態(tài)路由路徑參數(shù) 冒號(hào)開(kāi)頭
        {path:'/user/:id',component: User, props: {uname: 'test', age: 11 }},
    ]
})

注：此時(shí)id值無(wú)法訪問(wèn)

使用id的值方式如下：

const router = new VueRouter({
    //存放路由規(guī)則的數(shù)組
    routes: [
        //每個(gè)路由規(guī)則是一個(gè)配置對(duì)象，至少包含path和component兩個(gè)屬性
        //path: 當(dāng)前路由規(guī)則匹配的hash地址
        //component： 便是當(dāng)前路由規(guī)則對(duì)應(yīng)的組件
        //props 值設(shè)置為true route.params 將會(huì)被設(shè)置為組件屬性
        {path: '/', redirect: '/user'},
        //動(dòng)態(tài)路由路徑參數(shù) 冒號(hào)開(kāi)頭
        {
            path:'/user/:id',
            component: User, 
            //此時(shí)id的值和usname的值等都可使用
            props: route => ({uname: 'lisi' , age: 20, id: route.params.id })
        },
    ]
})

vue-router命名路由

概念

為了更加方便的表示路由的路徑，給路由規(guī)則起一個(gè)別名，即為：命名路由

const router = new VueRouter({
    //存放路由規(guī)則的數(shù)組
    routes: [
        
        {path: '/', redirect: '/user'},
        //動(dòng)態(tài)路由路徑參數(shù) 冒號(hào)開(kāi)頭
        {
            name: 'user',
            path:'/user/:id',
            component: User, 
            props: true
        }
    ]
})

頁(yè)面跳轉(zhuǎn)使用命名路由(to屬性要添加：)

<router-link :to="{ name: 'user', params: {id: 123} }">User1</router-link

vue-router編程式導(dǎo)航

常見(jiàn)頁(yè)面導(dǎo)航方式

聲明式導(dǎo)航

<a></a>
<router-link></router-link>

編程式導(dǎo)航：通過(guò)調(diào)用JavaScript的API實(shí)現(xiàn)導(dǎo)航方式

location.href=

Vue中的編程式導(dǎo)航

this.$router.push('hash地址')
//n是歷史記錄 1：表示歷史記錄中前進(jìn)1位 -1：表示歷史記錄中后退1位
this.$router.go(n)

Demo

push

const User = {
    //使用props獲取路由參數(shù)
    props: ['id'],
    //通過(guò) $route.params 獲取參數(shù)
    template: `
    <div>
        <div>User {{id}} 組件</div>
        <button @click='goRegister'>跳轉(zhuǎn)到注冊(cè)界面</button>
    </div>`,
    methods: {
        goRegister(){
            //跳轉(zhuǎn)指定頁(yè)面
            this.$router.push('/register')
        }
    }
}

var Register = {
    template:  `
    <div>
        <h1>Register 組件</h1>
        <hr/>
        <button @click='goBack'>回退一步</button>
        <router-link to="/register/tab1">Tab1</router-link>
        <router-link to="/register/tab2">Tab2</router-link>

        <!-- 子路由填充位 -->
        <router-view></router-view>
    </div>`,
    methods:{
        goBack(){
            //回退一步
            this.$router.go(-1);
        }
    }
}

push方法參數(shù)

//字符串
router.push('/home')
//對(duì)象
router.push({ path: '/home' })
//命名路由 攜帶參數(shù)
router.push({name: 'user', params: { user: 'test'} })
//查詢參數(shù) /register?name=test
router.push({ path: '/register', query: { name: 'test' } })

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

Vue學(xué)習(xí)筆記4--vue-router路由

Vue學(xué)習(xí)筆記4--vue-router路由

vue-router前端路由

路由的基本概念

本質(zhì)

路由分類

實(shí)現(xiàn)簡(jiǎn)單的前端路由

vue-router的基本使用

功能

使用步驟

路由重定向

vue-router嵌套路由

分析

步驟

vue-router動(dòng)態(tài)匹配路由

基本用法

傳參方式

props 使用

vue-router命名路由

概念

vue-router編程式導(dǎo)航

常見(jiàn)頁(yè)面導(dǎo)航方式

Demo

push方法參數(shù)

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

Vue學(xué)習(xí)筆記4--vue-router路由

vue-router前端路由

路由的基本概念

本質(zhì)

路由分類

實(shí)現(xiàn)簡(jiǎn)單的前端路由

vue-router的基本使用

功能

使用步驟

路由重定向

vue-router嵌套路由

分析

步驟

vue-router動(dòng)態(tài)匹配路由

基本用法

傳參方式

props 使用

vue-router命名路由

概念

vue-router編程式導(dǎo)航

常見(jiàn)頁(yè)面導(dǎo)航方式

Demo

push方法參數(shù)

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av