Vue——路由使用

效果图

点击登录和注册可以进行页面切换

 

 

 组件要求

  • login.js登录页组件
  • register.js注册页组件
  • index.html主页面

编码步骤

  1. 安装vue,vue-router；创建index.html、login.js、register.js文件
  2. 将vue.js、vue-router.js、login.js、register.js按顺序引入index.html中
  3. 编写login.js和register.js中的组件内容
  4. 在index.html中创建vue实例
  5. 创建vue-router实例，引用login.js和register.js中组件
  6. 编写<router-link to="">页签和<router-view>锚点
  7. 将vue-router实例和vue实例关联
  8. 配置默认路由

代码示例

index.html

单页应用中，页面的切换并不是页面的跳转。仅仅是地址最后的hash值变化。

  • 通过<router-view>来指定一个锚点，当路由的路径匹配时，vue-router会自动把对应组件放到锚点位置进行渲染
  • 通过<router-link>指定一个跳转链接，当点击时，会触发vue-router的路由功能，路径中的hash值会随之改变
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="content">
　　<!--指定跳转路径,默认是a标签-->
    <span><router-link to="/login">登录</router-link></span>
    <span><router-link to="/register">注册</router-link></span>
    <hr>
　　<!--锚点,用来显示组件内容-->
    <router-view></router-view>
</div>
</body>
<script src="node_modules/vue/dist/vue.js"></script>
<script src="node_modules/vue-router/dist/vue-router.js"></script>
<script src="src/js/login.js"></script>
<script src="src/js/register.js"></script>
<script>
　　//创建vue-router实例
    const router =new VueRouter({
        routes:[
        {
            path: '/',            //默认路由
            redirect: 'login'     //默认路由路径
        },{
            path:"/login",        //路由路径
            component: loginForm  //引用login.js中组件
        },{
            path:"/register",
            component: registerForm  //引用register.js中组件
        }]
    })
    const app=new Vue({
        el: "#content",
        router    //将router与vue关联
    })
</script>
</html>

login.js

&emsp；代表一个汉字

&ensp；代表半个汉字

const loginForm={
    template: `<div>
                    <h1>登录</h1>
                    用户名：<input id="username"><br>
                    密&emsp;码：<input id="password">
                    <input type="button" value="登录">
               </div>`
}

register.js

const registerForm={
    template: `<div>
                    <h1>注册</h1>
                    用&ensp;户&ensp;名：<input id="username"><br>
                    密&emsp;&emsp;码：<input id="password"><br>
                    确认密码：<input id="password">
                    <input type="button" value="注册">
               </div>`
}

 

posted @ 2020-12-10 21:37  别无所求---  阅读(132)  评论(0)    收藏  举报