Vue-Router基础_vue router y-CSDN博客

本文链接：https://blog.csdn.net/y_hh_/article/details/107854187

基本使用

基本步骤：

导包，导入vue-router的js文件，可以使用cdn方式，也可以加载本地的js文件
新建VueRouter对象，并在对象中设置routes (路由规则，需要设置path和component属性)
将router对象挂载到Vue实例中

在HTML文件中设置router-view作为占位符，用于匹配到的组件显示。

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单的例子</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
    <div id='app'>
        <router-link to='/login'>login</router-link>
        <router-link to='/register'>register</router-link>
        <router-view></router-view>
    </div>
</body>
<script>
    var login = {
        template:"<h1>这是登录组件</h1>"
    }
    var register = {
        template:"<h1>这是注册组件</h1>"
    }
    var router = new VueRouter({
        routes:[
            {path:'/login', component:login},
            {path:'/register', component:register}
        ]
    })
    var vm = new Vue({
        el:'#app',
        router:router
    })
</script>
</html>

ps: 在定义路由规则中，component属性对应的是一个组件对象(需要有template属性);

标签默认生成标签，可以通过tag属性进行修改。

Redirect 重定向

在路由规则中，可以通过redirect 属性重定向到一个新的地址。

 {path:'/', redirect:'/register'}

Router 传参

可以下面通过两种方式进行传参

this.$route.query
this.$.route.params

query

在url地址后面的通过+“？id=10”的方式进行传参，然后通过route中的query属性读取

在这里插入图片描述

params

需要在路由规则中进行修改

在这里插入图片描述

子路由嵌套

在父路由对象中，设置children属性（值也是个路由规则列表），如：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单的例子</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>

<body>
    <div id='app'>
        <router-link to='/login/son'>login</router-link>
        <router-link to='/register/12/lisi'>register</router-link>
        <router-view></router-view>
    </div>
</body>
<script>
    var login = {
        template: `<div><h1>这是登录组件</h1><router-view></router-view></div>`
    }
    var register = {
        template: "<h1>这是注册组件</h1>"
    }
    var son1 = {
        template: "<h2>这是子组件1</h2>"
    }
    var router = new VueRouter({
        routes: [
            {
                path: '/login', 
                component: login,
                children: [
                    { path: 'son', component: son1 }
                ]
            },
            { path: '/register/:id/:name', component: register }
        ]
    })
    var vm = new Vue({
        el: '#app',
        router: router
    })
</script>

</html>