Vue Router初识

最新推荐文章于 2024-09-16 08:47:17 发布

codesWang

最新推荐文章于 2024-09-16 08:47:17 发布

阅读量118

点赞数

文章标签： vue javascript

本文链接：https://blog.csdn.net/qazzwx/article/details/106230968

版权

一、基本概念

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：

嵌套的路由/视图表
模块化的、基于组件的路由配置
路由参数、查询、通配符
基于 Vue.js 过渡系统的视图过渡效果
细粒度的导航控制
带有自动激活的 CSS class 的链接
HTML5 历史模式或 hash 模式，在 IE9 中自动降级
自定义的滚动条行为

二、模拟路由

1.通过component标签和window.onhashchange来实现模拟路由

1.1、component Vue内置的标签,用途可以动态绑定我们的组件,根据数据不同更换不同的组件。

1.2、 window.onhashchange 每次URL地址栏发生改变是会有一次事件监听(PS: 触发并不会刷新页面,而只是页面的滚动)

<body>
    <div id='app'>
        <a href="#/home">首页</a>
        <a href="#/love">我喜欢</a>
        <a href="#/history">播放历史</a>
        <a href="#/about">关于我们</a>
        <!-- Vue内置的标签,用途可以动态绑定我们的组件,根据数据不同更换不同的组件 -->
        <component :is="componentName"></component>
    </div>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script>
        const Home = {
             template: `
             <div>
                <p>首页内容11</p> 
                <p>首页内容22</p>
            </div>
            `};
        const Love = { 
            template: `
            <div>
            <p>沉默是金</p>
            <p>倩女幽魂</p> 
            <p>当爱已成往事</p>
            </div>
             ` };
        const History = { 
            template: `
            <div>
            <p>沉默是金</p> 
            <p>当爱已成往事</p>
            </div>
            ` };
        const About = {
             template: `
             <p>关于我们</p>
             `};
        const vm = new Vue({
            el: '#app',
            data() {
                return {
                    componentName: ''
                }
            },
            components: {
                //ES6 写法 相当于 'Home':Home
                Home,
                Love,
                History,
                About
            }
        })
        //通过window监听hash值的变化来切换显现的页面
        window.onhashchange = function () {
            console.log(location.hash);
            let hash = location.hash.slice(1)
            console.log(location.hash.slice(1));
            switch (hash) {
                case '/home':
                    vm.componentName = 'Home'
                    break;
                case '/love':
                    vm.componentName = 'Love'
                    break;
                case '/history':
                    vm.componentName = 'History'
                    break;
                case '/about':
                    vm.componentName = 'About'
                    break;
            }
        }
    </script>
</body>

效果图如下

三、Vue Router使用

1、起步安装

npm i vue-router

2、基本使用 (PS: new VueRouter() 必须使用router变量接收否则会报错)

<body>
    <div id='app'>
        <router-link to="/home">首页</router-link>
        <router-link to="/love">我喜欢</router-link>
        <router-link to="/history">播放历史</router-link>
        <router-link to="/about">关于我们</router-link>
        <router-view></router-view>
    </div>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script src="node_modules/vue-router/dist/vue-router.js"></script>
    <script>
        const Home = {
            template: `
             <div>
                <p>Vue-Router形式设置路由</p> 
                <p>首页内容22</p>
            </div>
            `};
        const Love = {
            template: `
            <div>
            <p>沉默是金</p>
            <p>倩女幽魂</p> 
            <p>当爱已成往事</p>
            </div>
             ` };
        const History = {
            template: `
            <div>
            <p>沉默是金</p> 
            <p>当爱已成往事</p>
            </div>
            ` };
        const About = {
            template: `
             <p>关于我们</p>
             `};

        const router = new VueRouter({
            routes: [{
                path: '/',
                redirect: '/home'
            }, {
                path: '/home',
                component: Home
            }, {
                path: '/love',
                component: Love
            }, {
                path: '/history',
                component: History
            }, {
                path: '/about',
                component: About
            }]
        })
        new Vue({
            el: '#app',
            router
        })
    </script>
</body>

效果图

3、嵌套子类路由

<body>
    <div id='app'>
        <router-link to="/home">首页</router-link>
        <router-view></router-view>
    </div>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script src="node_modules/vue-router/dist/vue-router.js"></script>
    <script>
        const Home = {
            template: `
             <div>
                <p>Vue-Router形式设置路由</p> 
                <router-link to="/home/love">我喜欢</router-link>
                <router-link to="/home/history">播放历史</router-link>
                <router-link to="/home/about">关于我们</router-link>
                <router-view></router-view>
            </div>
            `};
        const Love = {
            template: `
            <div>
            <p>沉默是金</p>
            <p>倩女幽魂</p> 
            <p>当爱已成往事</p>
            </div>
             ` };
        const History = {
            template: `
            <div>
            <p>沉默是金</p> 
            <p>当爱已成往事</p>
            </div>
            ` };
        const About = {
            template: `
             <p>关于我们</p>
             `};

        const router = new VueRouter({
            routes: [{
                path: '/',
                redirect: '/home'
            }, {
                path: '/home',
                component: Home,
                children: [{
                    path: '/home/love',
                    component: Love
                }, {
                    path: '/home/history',
                    component: History
                }, {
                    path: '/home/about',
                    component: About
                }]
            }]
        })
        new Vue({
            el: '#app',
            router
        })
    </script>
</body>

运行效果图：

4、动态路由

<body>
    <div id='app'>
        <router-link to="/home/11">首页</router-link>
        <router-view></router-view>
    </div>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script src="node_modules/vue-router/dist/vue-router.js"></script>
    <script>
        const Home = {
            template: `
             <div>
                Home {{ $route.params.id }}
            </div>
            `};
    
        const router = new VueRouter({
            routes: [{
                path: '/',
                redirect: '/home'
            }, {
                path: '/home/:id',
                component: Home
            }]
        })
        new Vue({
            el: '#app',
            router
        })
    </script>
</body>

运行效果图

你可以在一个路由中设置多段“路径参数”，对应的值都会设置到 $route.params 中。例如：

模式	匹配路径	$route.params
/user/:username	/user/evan	`{ username: 'evan' }`
/user/:username/post/:post_id	/user/evan/post/123	`{ username: 'evan', post_id: '123' }`

5、命名路由

<body>
    <div id='app'>
        <router-link :to="{name: 'home',params:{id:1}}">命名路由</router-link>
        <router-view></router-view>
    </div>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script src="node_modules/vue-router/dist/vue-router.js"></script>
    <script>
        const Home = {
            template: `
             <div>
                Home {{ $route.params.id }}
            </div>
            `};
    
        const router = new VueRouter({
            routes: [{
                path: '/',
                redirect: '/home'
            }, {
                path: '/home/:id',
                name: 'home',
                component: Home
            }]
        })
        new Vue({
            el: '#app',
            router
        })
    </script>
</body>

运行效果图

6.路由传参（主要使用props）

<body>
    <div id='app'>
        <router-link to="/home">路由传参</router-link>
        <router-view></router-view>
    </div>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script src="node_modules/vue-router/dist/vue-router.js"></script>
    <script>
        const Home = {
            props:['a','b','name'],
            template: `
             <div>
               a+b={{a+b}} 名称: {{name}}
            </div>
            `};
        const router = new VueRouter({
            routes: [ {
                path: '/home',
                component: Home,
                props: { a: 8, b: 10, name: 'coderWang' }
            }]
        })
        new Vue({
            el: '#app',
            router
        })
    </script>
</body>

运行效果图