Vue第二部分(5)：编程式的路由导航和实战案例

简要介绍

除了使用 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。

语法：router.push(location, onComplete?, onAbort?)

注意：在 Vue 实例内部，你可以通过 $router访问路由实例。因此你可以调用this.$router.push。

声明式	编程式
< router-link :to="…">	router.push(…)

该方法的参数可以是一个字符串路径，或者一个描述地址的对象。例如：

// 字符串
router.push(’/login’)
// 对象
router.push({ path: ‘/login’ })
// 带查询参数，变成 /register?plan=private
router.push({ path: ‘register’, query: { plan: ‘private’ }})

示例：在注册后，立刻导航到登录

<div id="app">
    <router-link to="/login">登录</router-link>
    <router-link to="/register">注册</router-link>
    <hr>
    <router-view></router-view>
</div>
<template id="login-form">
    <form action="">
        用户名: <input type="text" name="username" > <br>
        密码: <input type="password" name="pwd"> <br>
        <input type="submit" value="登录">
    </form>
</template>
<template id="register-form">
    <form action="" @submit.prevent="handleRegister">
        用户名: <input type="text" name="username" > <br>
        密码: <input type="password" name="pwd1"> <br>
        确认密码: <input type="password" name="pwd2" > <br>
        <input type="submit" value="注册">
    </form>
</template>

<script>
    const loginForm = {
        template:"#login-form"
    }
    const registerForm = {
        template:"#register-form",
        methods:{
            handleRegister(){
                alert("添加成功");
                this.$router.push({path:"/login"})
            }
        }
    }
    var router = new VueRouter({
        routes:[
            {name:"default",path:"/",redirect:"/login"},
            {
                name:"login",//路由名称
                path:"/login",//路由路径
                component:loginForm//要路由到的组件
            },
            {name:"register",path:"/register",component:registerForm}
        ]
    });
    const vm = new Vue({
        el:"#app",
        components:{
            loginForm,
            registerForm
        },
        //router:router //如果路由变量名也叫router，则可以省略:router
        router
    })

</script>

实战案例

登录和注册切换

案例代码：

<div id="app">
    <router-view></router-view>
</div>
<template id="login-form">
    <form action="" @submit.prevent="handleLogin">
        用户名: <input type="text" > <br>
        密码: <input type="password"> <br>
        <input type="submit" value="登录">
        <router-link to="/register">注册</router-link>
    </form>
</template>
<template id="register-form">
    <form action="" @submit.prevent="handleRegister">
        用户名: <input type="text" > <br>
        密码: <input type="password" > <br>
        确认密码: <input type="password" > <br>
        <input type="submit" value="注册">   
        <router-link to="/login">登录</router-link>
    </form>
</template>
<script>
    const loginForm = {
        template:"#login-form",
        methods:{
            handleLogin(){
                alert("登录成功");
                location.href="https://www.baidu.com";
            }
        }
    };

    const registerForm = {
        template:"#register-form",
        methods:{
            handleRegister(){
                alert("注册成功");
                this.$router.push("/login");
            }
        }
    };

    const router = new VueRouter({
        routes:[
            {path:"/",redirect:"/login"},
            {path:"/login",component:loginForm},
            {path:"/register",component:registerForm}
        ]
    });

    const vm = new Vue({
        el:"#app",
        router
    })
</script>

增删改查的切换

案例效果：

示例代码：

<div id="app" >
    <div >
        <router-link to="/book/show"><button >查询</button></router-link>
        <router-link to="/book/add"><button >添加</button></router-link>
        <hr>
        <router-view></router-view>
    </div>
</div>
<template id="my-table">
    <table border="1">
        <thead>
            <tr>
                <th>id</th>
                <th>name</th>
                <th>price</th>
                <th>stock</th>
                <th>operation</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="b in books" :key="b.id">
                <td>{{b.id}}</td>
                <td>{{b.name}}</td>
                <td>{{b.price}}</td>
                <td>{{b.stock}}</td>
                <td>
                    <button>删除</button>
                    <router-link :to="{path:'/book/update',query:{id:b.id}}"><button>更新</button></router-link>
                </td>
            </tr>
        </tbody>
    </table>
</template>
<template id="add-form">
    <form action="">
        name: <input type="text" name="" id=""> <br>
        price: <input type="number" name="" id=""> <br>
        stock: <input type="number" name="" id=""> <br>
        <input type="submit" value="添加">
    </form>
</template>
<template id="update-form">
    <form action="">
        <input type="hidden" name="">
        name: <input type="text" name="" id=""> <br>
        price: <input type="number" name="" id=""> <br>
        stock: <input type="number" name="" id=""> <br>
        <input type="submit" value="更新">
    </form>
</template>
<script>
    const addForm = {
        template:"#add-form"           
    }

    const updateForm = {
        template:"#update-form"
    };

    const myTable = {
        template:"#my-table",
        data(){
            return {
                books:[
                    {id:1,name:"十万个为什么",price:100000.0,stock:1},
                    {id:2,name:"vue从入门到放弃",price:19800.0,stock:2}
                ]
            }
        }
    }

    const router = new VueRouter({
        routes:[
            {path:"/book/show",component:myTable},
            {path:"/book/add",component:addForm},
            {path:"/book/update",component:updateForm},
            {name:"book",path:"/book/:id",component:updateForm}
        ]
    });

    const vm = new Vue({
        el:"#app",
        router
    })
</script>