router vue 多个路径_Vue(7)：Vue中的路由，vue-router

最新推荐文章于 2024-07-31 10:45:42 发布

冰浠

最新推荐文章于 2024-07-31 10:45:42 发布

阅读量402

点赞数

文章标签： router vue 多个路径

本文链接：https://blog.csdn.net/weixin_30980025/article/details/112194352

版权

vue-router

使用vue-router和vue可以非常方便的实现复杂单页应用的动态路由功能。比如，当点击登录或注册按钮，分别显示登录页或注册页，而不是一起显示。

在项目目录下通过npm安装vue-router:

    npm install vue-router --save

1、分别在login.html和register.html中定义loginForm和registerForm

    const loginForm = {
        // template 中只能有一个根标签，不能有其他平行标签
        template:`
        <div>
            <h2>登录页</h2> 
            用户名：<input type="text"><br/>
            密&emsp;码：<input type="password"><br/>
            <input type="button" value="登录">
        </div>
        `
    }
    const registerForm = {
        // template 中只能有一个根标签，不能有其他平行标签
        template:`
        <div>
            <h2>注册页</h2> 
            用&ensp;户&ensp;名：<input type="text"><br/>
            密&emsp;&emsp;码：<input type="password"><br/>
            确认密码：<input type="password"><br/>
            <input type="button" value="注册">
        </div>
        `
    }

2、引用相关js

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

3、创建VueRouter对象，并指定路由参数

routes：路由规则的数组，可以指定多个对象，每个对象是一条路由规则，包含以下属性：path：路由的路径，component：组件名称

    const router = new VueRouter({
        routes:[
            {
                // 路由路径必须以"/"开头
                path:"/login",
                component:loginForm
            },
            {
                path: "/register",
                component: registerForm
            }
        ]
    })

4、在父组件中引入router对象

    const app =  new Vue({
        el:"#app",
        components:{
            loginForm,
            registerForm
        },
        router
    })

5、在视图中渲染，<router-view>和<router-link>

在index.html中定义Vue和VueRouter，并引用login和register页的js，通过<router-view>来指定一个锚点，当路由的路径匹配时，vue-router会自动把对应组件放到锚点位置进行渲染，通过<router-link>指定一个跳转链接，当点击时，会触发vue-router的路由功能，路径中的hash值会随之改变

    <body>
        <div id="app">
            <span><router-link to="/login">登录</router-link></span>
            <span><router-link to="/register">注册</router-link></span>
            <hr/>
            <router-view></router-view>
        </div>
    </body>

冰浠

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
router vue 多个路径_Vue(7)：Vue中的路由，vue-router

vue-router使用vue-router和vue可以非常方便的实现复杂单页应用的动态路由功能。比如，当点击登录或注册按钮，分别显示登录页或注册页，而不是一起显示。在项目目录下通过npm安装vue-router: npm install vue-router --save1、分别在login.html和register.html中定义loginForm和registerForm c...
复制链接

扫一扫