JavaScript教程之[Vue 牛刀小试]：第十三章

当前位置:

首页 > 网站开发 > JavaScript >

JavaScript教程之[Vue 牛刀小试]：第十三章 - Vue Ro(2)

> <div> <ul> <router-link v-for="(item,index) in menu" :key="index" :to="item.url" tag="li">{{item.name}} </router-link> </ul> </div> </template> <template id="main"> <div> <router-view> </router-view> </div> </template> <template id="form"> <div> <form> <div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email" v-model="email"> <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small> </div> <div class="form-group"> <label for="exampleInputPassword1">Password</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password" v-model="password"> </div> <button type="submit" class="btn btn-primary" @click="submit">Submit</button> </form> </div> </template> <template id="info"> <div class="card" style="margin-top: 5px;"> <div class="card-header"> 输入的信息 </div> <div class="card-body"> <blockquote class="blockquote mb-0"> <p>Email Address：{{ $route.query.email }} </p> <p>Password：{{ $route.query.password }}</p> <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite> </footer> </blockquote> </div> </div> </template> <script> // 1、定义路由跳转的组件模板 const header = { template: '<div class="header"> header </div>' } const sidebar = { template: '#sidebar', data() { return { menu: [{ name: 'Form', url: '/form' }, { name: 'Info', url: '/info' }] } }, } const main = { template: '#main' } const form = { template: '#form', data() { return { email: '', password: '' } }, methods: { submit() { this.$router.push({ path: '/info?email=' + this.email + '&password=' + this.password }) } }, } const info = { template: '#info' } // 2、定义路由信息 const routes = [{ path: '/', components: { default: header, sidebar: sidebar, main: main }, children: [{ path: '', redirect: 'form' }, { path: 'form', component: form }, { path: 'info', component: info }] }] const router = new VueRouter({ routes }) // 3、挂载到当前 Vue 实例上 const vm = new Vue({ el: '#app', data: {}, methods: {}, router: router }); </script>

　　3.2、param 传参

　　与获取 query 参数的方式相同，我们同样可以通过 vm.$route 获取到当前路由信息，从而在 param 对象中通过 $route.params.参数名的方式获取到通过 param 的方式进行参数传递的值。

　　不过，与 query 查询参数传参不同的是，在定义路由信息时，我们需要以占位符（:参数名）的方式将需要传递的参数指定到路由地址中，实现代码如下。

const routes = [{
    path: '/',
    components: {
        default: header,
        sidebar: sidebar,
        main: main
    },
    children: [{
        path: '',
        redirect: 'form'
    }, {
        path: 'form',
        name: 'form',
        component: form
    }, {
        path: 'info/:email/:password',
        name: 'info',
        component: info
    }]
}]

　　因为在使用 $route.push 进行路由跳转时，如果提供了 path 属性，则对象中的 params 属性会被忽略，所以这里我们可以采用命名路由的方式进行跳转或者直接将参数值传递到路由 path 路径中。同时，与使用 query 查询参数传递参数不同，这里的参数如果不进行赋值的话，就无法与我们的匹配规则对应，也就无法跳转到指定的路由地址中。

const form = {
    template: '#form',
    data() {
        return {
            email: '',
            password: ''
        }
    },
    methods: {
        submit() {
            // 方式1
            this.$router.push({
                name: 'info',
                params: {
                    email: this.email,
                    password: this.password
                }
            })

            // 方式2
            this.$router.push({
                path: `/info/${this.email}/${this.password}`,
            })
        }
    },
}

　　其余的部分与使用 query 查询参数传参的方式相同，这里我就直接给出实现代码了，实现的示意图如下。

<div id="app">
    <div class="row">
        <div class="col">
            <

栏目列表

首页 > 网站开发 > JavaScript >

JavaScript教程之[Vue 牛刀小试]：第十三章 - Vue Ro(2)