Vue 的路由

80437700

2020-05-15

Vue 的路由

前端路由:对于单页面应用程序来说,主要通过URL中的hash(#号)来实现不同页面之间的切换,同时hash有一个特点: HTTP请求中不会包含hash相关的内容;所以，单页面程序中的页面跳转主要用hash实现。

Vue-Router的基本使用

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <!-- 导入路由模块，它依赖于vue.js -->
    <script src="../js/vue-router.js"></script>
</head>

<body>
    <div id="app">
        <!-- 4.在页面中放入router-view标签 -->
        <!-- 这个标签是vue-router提供的 -->
        <router-view></router-view>
        <hr />
        <h2>router-link的使用</h2>
        <!-- 这个标签也是Vue-Router提供的，用于路由跳转,可以用tag属性指定它被渲染为什么标签 -->
        <router-link to="/login">登录</router-link>
        <router-link to="/register">注册</router-link>
    </div>

    <script>
        var home = {
            template: ‘<div><h1>首页组件</h1><a href="#/login">登录</a><a href="#/register">注册</a></div>‘
        }

        var login = {
            template: ‘<h1>登录组件</h1>‘
        }

        var register = {
            template: "<h2>注册组件</h2>"
        }

        //2. 创建一个路由对象，当导入Vue-router包之后，在window对象中就有了一个路由的构造函数，叫做VueRouter
        //在new 对象的时候可以为构造函数，传递一个配置对象
        var routerObj = new VueRouter({
            //表示路由匹配规则
            routes: [{
                    //每个路由规则，都是一个对象，这个对象有两个必要的属性。
                    //属性1：path，表示监听那个路连接地址；
                    //属性2：component，表示，如果路由是前面匹配到的path，则展示component对应的组件。
                    path: ‘/login‘,
                    component: login //这里必须是一个组件模板对象，而不是组件的引用名称
                },
                {
                    path: ‘/register‘,
                    component: register
                },
                {
                    path: ‘/‘,
                    //redirect:‘/login‘  前端重定向，不用指定component
                    component: home
                }
            ]
        });

        var vm = new Vue({
            el: ‘#app‘,
            data: {},
            computed: {},
            //3. 将路由规则对象注册到vue实例上，用来监听Url地址的变化，然后展示对应的组件
            router: routerObj
        })
    </script>
</body>

</html>

路由传参

通过query方式传参
通过params

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <script src="../js/vue-router.js"></script>
</head>

<body>
    <div id="app">
        <router-view></router-view>
        <router-link to="/login">登录</router-link>
        <router-link to="/register/10/ls">注册</router-link>
    </div>

    <script>
        var login = {
            //通过$route.query可以获取url?后面的参数
            template: ‘<h1>登录组件---{{$route.query.id}}</h1>‘
        }
        var register = {
            template: "<h2>注册组件----{{$route.params.id}}---{{$route.params.name}}</h2>"
        }

        var router = new VueRouter({
            routes: [{
                    path: ‘/login‘,
                    component: login
                },
                {
                    path: ‘/register/:id/:name‘,
                    // path: ‘/register/‘,
                    component: register
                }
            ]
        });
        var vm = new Vue({
            el: ‘#app‘,
            data: {},
            methods: {},
            router,
            created() {
                console.log(this.$route);
            }

        });
    </script>
</body>

</html>

路由嵌套

实际生活中的应用界面，通常由多层嵌套的组件组合而成。同样地，URL 中各段动态路径也按某种结构对应嵌套的各层组件，例如：

/user/foo/profile                     /user/foo/posts
+------------------+                  +-----------------+
| User             |                  | User            |
| +--------------+ |                  | +-------------+ |
| | Profile      | |  +------------>  | | Posts       | |
| |              | |                  | |             | |
| +--------------+ |                  | +-------------+ |
+------------------+                  +-----------------+

借助 vue-router，使用嵌套路由配置，就可以很简单地表达这种关系。

要在嵌套的出口中渲染组件，需要在 VueRouter 的参数中使用 children 配置：

const router = new VueRouter({
  routes: [
    { path: ‘/user/:id‘, component: User,
      children: [
        {
          // 当 /user/:id/profile 匹配成功，
          // UserProfile 会被渲染在 User 的 <router-view> 中
          path: ‘profile‘,
          component: UserProfile
        },
        {
          // 当 /user/:id/posts 匹配成功
          // UserPosts 会被渲染在 User 的 <router-view> 中
          path: ‘posts‘,
          component: UserPosts
        }
      ]
    }
  ]
})

注意，以 / 开头的嵌套路径会被当作根路径。这让你充分的使用嵌套组件而无须设置嵌套的路径。

命名路由

有时候，通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候。你可以在创建 Router 实例的时候，在 routes 配置中给某个路由设置名称。

const router = new VueRouter({
  routes: [
    {
      path: ‘/user/:userId‘,
      name: ‘user‘,
      component: User
    }
  ]
})

要链接到一个命名路由，可以给 router-link 的 to 属性传一个对象：

<router-link :to="{ name: ‘user‘, params: { userId: 123 }}">User</router-link>

这跟代码调用 router.push() 是一回事：

router.push({ name: ‘user‘, params: { userId: 123 }})

这两种方式都会把路由导航到 /user/123 路径。

嵌套命名视图

我们也有可能使用命名视图创建嵌套视图的复杂布局。这时你也需要命名用到的嵌套 router-view 组件。

<!DOCTYPE html>
<html lang="zh-cn" class="h-100">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/bootstrap.css">
    <script src="../js/vue.js"></script>
    <script src="../js/vue-router.js"></script>
</head>

<body class="h-100">
    <div id="app" class="h-100">
        <router-view class="bg-primary h-25 m-0 p-0"></router-view>
        <div class="row h-75 m-0">
            <router-view name="left" class="float-left bg-danger col-4 h-100"></router-view>
            <router-view name="main" class="float-left bg-success col-8"></router-view>
        </div>
    </div>

    <script>
        var left = {
            //通过$route.query可以获取url?后面的参数
            template: ‘<div><h2>left</h2></div>‘
        }
        var main = {
            template: "<div><h2>main</h2></div>"
        }

        var header = {
            template: "<div><h2>header</h2></div>"
        }

        var router = new VueRouter({
            routes: [{
                path: "/",
                components: {
                    default: header,
                    left: left,
                    main: main
                }
            }]
        });
        var vm = new Vue({
            el: ‘#app‘,
            data: {},
            methods: {},
            router,
            created() {
                console.log(this.$route);
            }

        });
    </script>
</body>

</html>

vue 路由 vue-router vue路由