Vue.js最终序曲-Vue-router(Vue路由)

Vue.js最终序曲-Vue-router(Vue路由)

第一序:

Vue入门

第二序:

Vue指令

第三序:

Vue组件

模拟

现在我们来实现这样一个功能:

一个页面,包含登录和注册,点击不同按钮,实现登录和注册页切换

编写父组件

为了让接下来的功能比较清晰,我们先新建一个文件夹:src

然后新建一个HTML文件,作为入口:index.html

Vue.js最终序曲-Vue-router(Vue路由)_第1张图片

编写页面的基本结构:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<div id="app">
    <span>登录span>
    <span>注册span>
    <hr/>
    <div>
        登录页/注册页
    div>
div>
body>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app"
    })
script>

html>

样式:

Vue.js最终序曲-Vue-router(Vue路由)_第2张图片

编写登陆及注册组件

接下来我们来实现登录组件,以前我们都是写在一个文件中,但是为了复用性,开发中都会把组件放入独立的JS文件中,我们新建一个user目录以及login.js及register.js:

Vue.js最终序曲-Vue-router(Vue路由)_第3张图片

编写组件,这里我们只写模板,不写功能

login.js:

const loginForm = {
    template:'\
    
\

登录页

\ 用户名:
\ 密码:
\
\ '
}

register.js:

const registerForm = {
    template:'\
    
\

注册页

\ 用 户 名:
\ 密  码:
\ 确认密码:
\
\ '
}

在父组件中引用


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<div id="app">
    <span>登录span>
    <span>注册span>
    <hr/>
    <div>
        
        
        
        <login-form>login-form>
        <register-form>register-form>
    div>
div>
body>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>

<script src="user/login.js">script>
<script src="user/register.js">script>
<script type="text/javascript">
    var vm = new Vue({
        el: "#app",
        /*定义实例的组件*/
        components: {
            loginForm,
            registerForm
        }
    })
script>

html>

效果:

Vue.js最终序曲-Vue-router(Vue路由)_第4张图片

我们期待的是,当点击登录或注册按钮,分别显示登录页或注册页,而不是一起显示。

但是,如何才能动态加载组件,实现组件切换呢?

虽然使用原生的Html5和JS也能实现,但是官方推荐我们使用vue-router模块

新建vue-router对象,并且指定路由规则:

html中

    // 创建VueRouter对象
    const router = new VueRouter({
        routes:[ // 编写路由规则
            {
                path:"/login", // 请求路径,以“/”开头
                component:loginForm // 组件名称
            },
            {
                path:"/register",
                component:registerForm
            }
        ]
    })

注意,路由对象一定在放在实例的下方!!

注意,路由对象一定在放在实例的下方!!

注意,路由对象一定在放在实例的下方!!

  • 创建VueRouter对象,并指定路由参数
  • routes:路由规则的数组,可以指定多个对象,每个对象是一条路由规则,包含以下属性:
    • path:路由的路径
    • component:组件名称

在实例中引入router对象

    var vm = new Vue({
        el: "#app",
        /*定义实例的组件*/
        components: {
            loginForm,
            registerForm
        },
        router //引用router对象
    })

页面跳转控制

<body>
<script src="https://unpkg.com/vue/dist/vue.js">script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js">script>
<div id="app">
    
    <span><router-link to="/login">登录router-link>span>
    <span><router-link to="/register">注册router-link>span>
    <hr/>
    <div>
        
        <router-view>router-view>
    div>
div>
body>

效果

Vue.js最终序曲-Vue-router(Vue路由)_第5张图片

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

事实上,我们总共就一个HTML:index.html。

你可能感兴趣的:(前端)