Vue-router 创建与切换组件实例

最新推荐文章于 2023-10-31 21:19:25 发布

chenkhcn

最新推荐文章于 2023-10-31 21:19:25 发布

阅读量352

点赞数

文章标签： vue.js 路由器

本文链接：https://blog.csdn.net/Crazykun/article/details/107621668

版权

1、定义组件模板实例

var login = {
            template: "#login"
        }

        var register = {
            template: "#register"
        }

2、引入路由js文件

<!-- 引入路由js文件 -->
    <script src="js/vue-router.js"></script>

3、创建路由对象

//创建vue-router对象
        var router = new VueRouter({
            routes: [{
                path: '/',
                redirect: '/login'
            }, {
                path: '/login',
                component: login
            }, {
                path: '/register',
                component: register
            }]
        })

4、将路由对象挂载到vue实例中

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

            },
            methods: {

            },
            //把路由对象挂载到vue实例中
            router: router,
        })

5、使用路由显示组件

<div id="app">

        <!-- 使用路由切换组件 -->
        <router-link to="/login">登陆</router-link>
        <router-link to="/register">注册</router-link>
        <!-- 显示组件 -->
        <router-view></router-view>
    </div>

完整代码如下：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue html demo</title>
    <script src="js/vue.js"></script>
    <!-- 引入路由js文件 -->
    <script src="js/vue-router.js"></script>
</head>

<body>
    <div id="app">

        <!-- 使用路由切换组件 -->
        <router-link to="/login">登陆</router-link>
        <router-link to="/register">注册</router-link>
        <!-- 显示组件 -->
        <router-view></router-view>
    </div>

    <template id="login">
        <div>
            <h3>登陆组件</h3>
        </div>
    </template>

    <template id="register">
        <div>
            <h3>注册组件</h3>
        </div>
    </template>
    <script>
        //定义组件模版对象
        var login = {
            template: "#login"
        }

        var register = {
            template: "#register"
        }

        //创建vue-router对象
        var router = new VueRouter({
            routes: [{
                path: '/',
                redirect: '/login'
            }, {
                path: '/login',
                component: login
            }, {
                path: '/register',
                component: register
            }]
        })

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

            },
            methods: {

            },
            //把路由对象挂载到vue实例中
            router: router,
        })
    </script>
</body>

</html>

chenkhcn

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue-router 创建与切换组件实例

1、定义组件模板实例var login = { template: "#login" } var register = { template: "#register" }2、引入路由js文件 <script src="js/vue-router.js"></script>3、创建路由对象//创建vue-ro
复制链接

扫一扫