[vue]vue路由篇vue-router

時間 2020-06-17

原文原文鏈接

spa單頁開發及vue-router基礎: https://www.cnblogs.com/iiiiiher/p/9034496.htmlhtml

url兩種傳參方式

query: $route.query

http://localhost:63342/login?name=maotai&age=22

params: $route.params

http://localhost:63342/login/maotai/22

引入router組件後, vm裏註冊router,會在vm實例上新增router屬性 vue

基礎路由匹配規則tag激活類

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .active{
            color: yellowgreen;
        }
    </style>
</head>
<body>
<div id="app">
    <router-link to="/login" tag="button">login</router-link>
    <router-link to="/register">register</router-link>
    <router-view></router-view>
</div>

<template id="login">
    <div>login</div>
</template>
<template id="register">
    <div>register</div>
</template>
<script src="node_modules/vue/dist/vue.js"></script>
<script src="node_modules/vue-router/dist/vue-router.js"></script>
<script>
  let login = {
    template: "#login",
  };
  let register = {
    template: "#register",
  };

  let routes = [
    {path: '/', redirect: '/login'},
    {path: '/login', component: login},
    {path: '/register', component: register},
    {path: '/*', redirect: '/login'},
  ];
  let router = new VueRouter({
    routes,
    linkActiveClass: 'active',
  });
  let vm = new Vue({
    el: "#app",
    data: {},
    router,
  })
</script>
</body>
</html>

路由參數獲取

query方式

<div id="app">
    <router-link to="/login?name=maotai&age=22">login</router-link>
    <router-link to="/register">register</router-link>
    <router-view></router-view>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script src="node_modules/vue-router/dist/vue-router.js"></script>
<script>
  let login = {
    template: "<h1>登陸 -- {{$route.query.name}}</h1>",
    created() {
      console.log(this.$route);
    }
  };
  let register = {
    template: "<h1>註冊</h1>"
  };
  let routes = [
    {path: '/login', component: login},
    {path: '/register', component: register},
  ];
  let router = new VueRouter({
    routes
  });
  let vm = new Vue({
    el: '#app',
    data: {},
    router,
  })
</script>

param方式獲取參數值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .active {
            color: yellowgreen;
        }
    </style>
</head>
<body>
<div id="app">
    <router-link to="/login/maotai/22" tag="button">login</router-link>
    <router-link to="/register">register</router-link>
    <router-view></router-view>
</div>

<template id="login">
    <div>login {{$route.params.name}} -- {{$route.params.age}}</div>
</template>
<template id="register">
    <div>register</div>
</template>
<script src="node_modules/vue/dist/vue.js"></script>
<script src="node_modules/vue-router/dist/vue-router.js"></script>
<script>
  let login = {
    template: "#login",
    created() {
      console.log(1, this.$route);
    }
  };
  let register = {
    template: "#register",
  };

  let routes = [
    {path: '/login/:name/:age', component: login},
    {path: '/register', component: register},
  ];
  let router = new VueRouter({
    routes,
    linkActiveClass: 'active',
  });
  let vm = new Vue({
    el: "#app",
    data: {},
    router,
  })
</script>
</body>
</html>

路由嵌套-children 子路由

三級菜單 node

錯誤的寫法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <router-link to="/account">account</router-link>

    <router-view></router-view>
</div>

<template id="account">
    <div>
        <h1>這是account組件</h1>
        <router-link to="/account/login">login</router-link>
        <router-link to="/account/register">register</router-link>
        <router-view></router-view>
    </div>
</template>

<template id="login">
    <div>login</div>
</template>

<template id="register">
    <div>register</div>
</template>
<script src="node_modules/vue/dist/vue.js"></script>
<script src="node_modules/vue-router/dist/vue-router.js"></script>
<script>
  let account = {
    template: "#account",
  };
  let login = {
    template: "#login",
    created() {
      console.log(1, this.$route);
    }
  };
  let register = {
    template: "#register",
  };

  let routes = [
    {path: '/account', component: account},
    {path: '/account/login', component: login},
    {path: '/account/register', component: register},
  ];
  let router = new VueRouter({
    routes,
  });
  let vm = new Vue({
    el: "#app",
    data: {},
    router,
  })
</script>
</body>
</html>

正確的姿式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <router-link to="/account">account</router-link>

    <router-view></router-view>
</div>

<template id="account">
    <div>
        <h1>這是account組件</h1>
        <router-link to="/account/login">login</router-link>
        <router-link to="/account/register">register</router-link>
        <router-view></router-view>
    </div>
</template>

<template id="login">
    <div>login</div>
</template>

<template id="register">
    <div>register</div>
</template>
<script src="node_modules/vue/dist/vue.js"></script>
<script src="node_modules/vue-router/dist/vue-router.js"></script>
<script>
  let account = {
    template: "#account",
  };
  let login = {
    template: "#login",
    created() {
      console.log(1, this.$route);
    }
  };
  let register = {
    template: "#register",
  };

  let routes = [
    {
      path: '/account',
      component: account,
      children: [
        {path: 'login', component: login},
        {path: 'register', component: register},
      ],
    },
  ];
  let router = new VueRouter({
    routes,
  });
  let vm = new Vue({
    el: "#app",
    data: {},
    router,
  })
</script>
</body>
</html>

router-view name屬性: 給router-view命名-實現經典佈局

一個/下同時展現多個組件 vue-router

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        .header {
            background-color: lavender;
        }

        .main {
            display: flex;
            height: 600px;
        }

        .main .side {
            flex: 2;
            background-color: gray;
        }

        .main .content {
            flex: 8;
            background-color: lightpink;
        }
    </style>
</head>
<body>
<div id="app">
    <router-view></router-view>
    <div class="main">
        <router-view name="side"></router-view>
        <router-view name="content"></router-view>
    </div>
</div>


<template id="register">
    <div>register</div>
</template>

<script src="node_modules/vue/dist/vue.js"></script>
<script src="node_modules/vue-router/dist/vue-router.js"></script>
<script>
  let header = {
    template: "<div class='header'>header</div>",
  };
  let side = {
    template: "<div class='side'>side</div>",
  };
  let content = {
    template: "<div class='content'>content</div>",
  };

  let routes = [
    {
      path: '/', components: {
        default: header,
        side: side,
        content: content,
      }
    }
  ];
  let router = new VueRouter({
    routes,
  });

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

router-link的位置和router-view的位置能夠再也不一塊兒

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <p>
        <router-link to="/user/foo">/user/foo</router-link>
        <router-link to="/user/foo/profile">/user/foo/profile</router-link>
        <router-link to="/user/foo/posts">/user/foo/posts</router-link>
    </p>
    <router-view></router-view>
</div>

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
    const User = {
        template: `
            <div class="user">
              <h2>User {{ $route.params.id }}</h2>
              <router-view></router-view>
            </div>`
    };

    const UserHome = {template: '<div>Home</div>'};
    const UserProfile = {template: '<div>Profile</div>'};
    const UserPosts = {template: '<div>Posts</div>'};

    const router = new VueRouter({
        routes: [
            {
                path: '/user/:id', component: User,
                children: [
                    // UserHome will be rendered inside User's <router-view>
                    // when /user/:id is matched
                    {path: '', component: UserHome},

                    // UserProfile will be rendered inside User's <router-view>
                    // when /user/:id/profile is matched
                    {path: 'profile', component: UserProfile},

                    // UserPosts will be rendered inside User's <router-view>
                    // when /user/:id/posts is matched
                    {path: 'posts', component: UserPosts}
                ]
            }
        ]
    });
    const app = new Vue({router}).$mount('#app')
</script>
</body>
</html>

子組件
子路由

動態路由
命名視圖

路由綜合例子

參考: https://jsfiddle.net/posva/22wgksa3/app

點settings顯示2個導航, 點profile導航, 顯示2個組件.ide

ps: 這點對理解vue-router很是重要. 佈局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <router-view></router-view>
</div>
<template id="mysettings">
    <div>
        <p>mysettings</p>
        <router-link to="/mysettings/email">/mysettings/email</router-link>
        <router-link to="/mysettings/profile">/mysettings/profile</router-link>

        <router-view></router-view>
        <router-view name="profilepreview"></router-view>
    </div>
</template>

<template id="email">
    <div>
        <p>email</p>
    </div>
</template>
<template id="profileedit">
    <div>
        <p>profileedit</p>
    </div>
</template>

<template id="profilepreview">
    <div>
        <p>profilepreview</p>
    </div>
</template>

<script src="node_modules/vue/dist/vue.js"></script>
<script src="node_modules/vue-router/dist/vue-router.js"></script>
<script>
    let mysettings = {
        template: "#mysettings"
    };
    let email = {
        template: "#email"
    };

    let profileedit = {
        template: "#profileedit"
    };
    let profilepreview = {
        template: "#profilepreview"
    };
    let routes = [
        {
            path: '/mysettings', component: mysettings, children: [
                {path: 'email', component: email},
                {
                    path: 'profile', components: {
                        default: profileedit,
                        profilepreview: profilepreview
                    }
                },
            ]
        }
    ];
    let router = new VueRouter({routes});
    let vm = new Vue({
        el: "#app",
        router,
    })
</script>
</body>
</html>