Vue-路由

## 路由

    -映射关系   url地址:服务器真实资源

    -前端 hash 页面跳转

        事件:事件处理函数

    应用:通过超链接实现,如点击超链接hash会改变,此时我们监听hash,一旦有变化就需要获取响应的hash值,从而切换要显示的组件

注意导入相应的包:通过使用VUE-router包简化vue中通过location的hash值变化实现路由功能

<script src="../node_modules/vue-router/dist/vue-router.js"></script>

【1】最基本应用

<div id="app">

<router-link to='/home'>首页</router-link>

<router-link to='/news'>新闻</router-link>

<!-- 占位符:显示组件 -->

<router-view></router-view>

</div>

============================

创建组件

const Home = {

template: `

                <h1>主页板块</h1>

            `

        };

const News = {

template: `

                <h1>新闻板块</h1>

            `

        };

===========================

//创建路由实例对象

const router = new VueRouter({

//路由规则

routes: [{

path: '/',

redirect: '/home'

            }, {

path: '/home',

component: Home

            }, {

path: '/news',

component: News

            }]

        });

==============================

//挂载路由

const vm = new Vue({

el: '#app',

router

        });

【2】嵌套路由

=============定义组件

const Home = {

template: `

                <h1>主页板块</h1>

            `

        };

const News = {

// 注意:根 div的作用

template: `

            <div>

                <h1>新闻板块</h1>

                <router-link to='/news/foreign'>国外</router-link>

                <router-link to='/news/china'>国内</router-link>

                <router-view></router-view>

            </div>

            `

        };

//

const ForeignNews = {

template: `

                <h1>国外新闻板块</h1>

            `

        };

const ChineseNews = {

template: `

                <h1>国内新闻板块</h1>

            `

        };

====================路由实例对象

const router = new VueRouter({

//路由规则

routes: [{

path: '/',

redirect: '/abc'

            }, {

path: '/home',

component: Home

            }, {

path: '/news',

component: News,

children: [{

path: '/news/foreign',

component: ForeignNews

                }, {

path: '/news/china',

component: ChineseNews

                }]

            }]

        });

===============挂载路由

const vm = new Vue({

el: '#app',

router

        });

=============页面布局不变

<div id="app">

<!-- <vue-linker></vue-linker> -->

<router-link to='/home'>首页</router-link>

<router-link to='/news'>新闻</router-link>

<!-- 占位符:显示组件 -->

<router-view></router-view>

</div>

【3】多个子组件

<div id="app">

<!-- <vue-linker></vue-linker> -->

<router-link to='/news/1'>新闻1</router-link>

<router-link to='/news/2'>新闻2</router-link>

<router-link to='/news/3'>新闻3</router-link>

<!-- 占位符:显示组件 -->

<router-view></router-view>

</div>

==============路由实例对象==================

const News = {

// <h1>公司新闻{{id}}</h1>

// <h1>公司新闻{{$route.params.id}}</h1>

props: ['id', 'a', 'b'],

template: `

                <h1>公司新闻{{id}}-{{$route.params.id}}-{{a}}-{{b}}</h1>

            `

        };

=============注意子路由要对a,b可见,id:props=ture

//创建路由实例对象

const router = new VueRouter({

//路由规则

routes: [{

path: '/',

redirect: '/news/1'

            }, {

path: '/news/:id',

component: News,

props: true,

// props: {

//     a: 10,

//     b: 20

// }

props: (route) => {

return {

a: 10,

b: 20,

id: route.params.id

                    }

                }

            }],

        });


【4】命名路由

<div id="app">

<router-link to='/home'>首页</router-link>

<router-link :to="{name:'news',params:{id:30}}">新闻</router-link>

<!-- 声明式导航 -->

<router-link to='/news/1'>新闻1</router-link>

<router-link to='/news/2'>新闻2</router-link>

<router-link to='/news/3'>新闻3</router-link>

<router-view></router-view>

</div>

============================定义组件——home

const Home = {

template: `

                <div>

                    <h1>Home</h1>

                    <button @click='goNews'>跳转到新闻页面</button>

                </div>

            `,

methods: {

goNews() {

// 支持页面跳转

this.$router.push('/news/1');

this.$router.push({

name: 'news',

params: {

id: 123

                        }

                    });

                }

            }

        }

======================news组件

const News = {

props: ['id', 'a', 'b'],

template: `

            <div>

                <h1>公司新闻{{id}}-{{$route.params.id}}-{{a}}-{{b}}</h1>

               <button @click='goHome'>返回上一页</button>

            </div>

            `,

methods: {

goHome() {

this.$router.go(-1);

                }

            }

        };

================路由实例定义

const router = new VueRouter({

routes: [{

path: '/',

redirect: '/home'

            }, {

path: '/home',

component: Home

            }, {

name: 'news', //通过name属性给该路由添加别名

path: '/news/:id',

component: News,

props: (route) => {

return {

a: 10,

b: 20,

id: route.params.id

                    }

                }

            }],

        });



vue实现路由功能——核心:通过location的hash值通过数据绑定实现页面跳转

window.onhashchange = () => {

console.log(location);

console.log(location.hash.slice(1));

vm.compName = location.hash.slice(1);

        }


===========数据定义============

let vm = new Vue({

el: '#app',

data: {

compName: 'home'

            },

components: {

home,

news,

products,

about

            }

        });

=======组件定义=============

//首页

const home = {

template: `

                <h1>主页板块</h1>

            `

        };

//新闻

const news = {

template: `

                <h1>新闻板块</h1>

            `

        };

//产品

const products = {

template: `

                <h1>产品板块</h1>

            `

        };

//关于我们

const about = {

template: `

                <h1>关于我们板块</h1>

            `

        };

=====页面布局============

<div id="app">

<a href="#home">首页</a>

<a href="#news">新闻</a>

<a href="#products">产品</a>

<a href="#about">关于我们</a>

<div>

<component :is="compName"></component>

<!-- <components>{{compName}}</components>

            <abcd>{{compName}}</abcd> -->

</div>

posted @ 2020-06-08 17:50  小海_macro  阅读(128)  评论(0编辑  收藏  举报