zoukankan html css js c++ java

[vue]vue路由篇vue-router

spa单页开发及vue-router基础: https://www.cnblogs.com/iiiiiher/p/9034496.html

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属性

基础路由匹配规则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 子路由

三级菜单

错误的写法

<!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命名-实现经典布局

一个/下同时展示多个组件

<!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/

点settings显示2个导航, 点profile导航, 显示2个组件.

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>

查看全文

相关阅读:
Web应用Word生成
 记 Ubuntu14.04 Monodevelop 安装的两个问题
 CSDN上下载的一些关于Android程序调用Webservice执行不成功的问题
 Binary Search Tree Iterator
算法之贪心算法
 《SAS编程与数据挖掘商业案例》学习笔记之十七
 数据库设计之半结构化存储
 Timus 1446. Sorting Hat 分类问题
 WebGL on iOS8 最终等到了这一天
 仿netty线程池简化版本

原文地址：https://www.cnblogs.com/iiiiiher/p/9497833.html

[vue]vue路由篇vue-router

url两种传参方式

基础路由 匹配规则tag激活类

路由参数获取

query方式

param方式获取参数值

路由嵌套-children 子路由

router-view name属性: 给router-view命名-实现经典布局

router-link的位置和router-view的位置可以不再一起

路由综合例子

基础路由匹配规则tag激活类