vue vue-router 基本使用

最新推荐文章于 2024-04-30 16:57:21 发布

weixin_34124577

最新推荐文章于 2024-04-30 16:57:21 发布

阅读量58

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/liaohui5/p/10581652.html

版权

官方教程: https://cn.vuejs.org/v2/guide/

vue-route

由于这不是vue必须的,但是在使用前需要先安装vue
并且在使用前必须引入vue.js因为vue-router是依赖vue.js的

安装

npm install vue vue-router --save

路由

什么是路由?

访问不同的路径,就可以返回不同的结果

使用路由 vue-router

由于vue-router是基于vue的所以在使用前必须行引入vue

<script src="../node_modules/vue/dist/vue.js"></script>
<!-- 引入vue-router.js之前必须引入vue.js -->
<script src="../node_modules/vue-router/dist/vue-router.js"></script>

基本路由

// 实例化vue-router
let vueRouter = new VueRouter({
    routes: [
        {path: "/home", component: home},
        {path: "/list", component: list},
    ],
});

// 关联到vue实例中使用router属性
const vm = new Vue({
    el: '#app',
    router: vueRouter,
});

在模板中使用 <router-view></router-view> 这个全局组件即可
这个组件能够根据 VueRouter 实例中的的routes自动显示或隐藏相应的组件

<div id="app">
    <router-view></router-view>
</div>

路由模式 mode

hash(default)
history.pushStatus('','','path');

如果想在页面中使用 a标签 来访问不同的路由可以设置
则可以设置路由模式 mode 的值为 history,使用 <router-link>
这个全局组件

const vueRouter = new VueRouter({
    routes: [
        {path: "/home", component: home},
        {path: "/list", component: list},
    ],
    mode: 'history',
});

在模板中使用 <router-link></router-link> 组件

<div id="app">
    <router-link to="/home">去首页</router-link>
    <router-link to="/list">去列表页</router-link>
</div>

注:使用 <router-link></router-link> 组件是必须加上 to
属性,to 的值是 vueRouter 实例中 routes 配置的路由项
点击哪个就会显示路由对应的组件

默认路由

const vueRouter = new VueRouter({
    routes: [
        {path: "", component: home}, // a默认路由
        {path: "/home", component: home},
        {path: "/list", component: list},
        {path: "/*", redirect: '/home'} // b默认路由
        // redirect 是重定向
    ],
    mode: 'history',
});

a默认路由: 没有任何路由时候,显示这个路由对应的组件
b默认路由: 没有匹配到任何路由时,显示这个路由对应的组件
注: 因为路由匹配顺序的原因,这a必须第一个 b必须在 最后一个
在需要匹配 404 时建议使用这种方式

设置路由连接的样式
- 设置路由标签(默认a标签)
- 设置当前路由样式

<!-- 设置路由标签(默认`a标签`) -->
<div id="app">
    <router-link to="/home" tag="button">去首页</router-link>
    <router-link to="/list" tag="a">列表页</router-link>
    <router-view></router-view>
</div>

<!--设置活动路由样式-->
<style>
    .active {
        color: #ff0000;
    }
</style>

<script >
 const vueRouter = new VueRouter({
    routes: [
        {path: "", component: home},
        {path: "/home", component: home},
        {path: "/list", component: list},
    ],
    mode: 'history',
    // 默认的活动路由类名叫: router-link-active
    linkActiveClass: 'active',
});
</script>

编程式路由

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue For Vue-Router</title>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script src="./node_modules/vue-router/dist/vue-router.js"></script>
    <style>
        .home, .list{
            height: 300px;
            color: #ffffff;
        }
        .home{ background: #000; }
        .list{ background: #cccccc; }
    </style>
</head>
<body>

<div id="app">
    <router-link :to="{path:'/home'}"></router-link>
    <router-link :to="{path:'/list'}"></router-link>
    <router-view></router-view>
</div>

<!--template-->
<script>
    // make a vue template
    let home = Vue.extend({
        template: "<div class='home'>home首页 <button @click='toList'>去列表页</button></div>",
        methods:{
            toList(){
                this.$router.push('/list');
            },
        }
    });

    let list = Vue.extend({
        template: '<div class="list">list列表页 <button @click="toIndex">去首页</button></div>',
        methods:{
            toIndex() {
                this.$router.go(-1);
            },
        },
    });

    // vue-route===================
    const vueRouter = new VueRouter({
        routes: [
            {path: "", component: home},
            {path: "/home", component: home},
            {path: "/list", component: list},
        ],
    });

    // vue========================
    const vm = new Vue({
        el: '#app',
        router: vueRouter,
        /**
         * 只要vue类实例挂载了router属性就会生成
         * $router属性(放方法)  和  $route属性(放属性)
         * 可以通过 this.$router/$route 来获得
         */
    });
</script>
</body>
</html>

路由嵌套

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue vue-router study</title>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script src="./node_modules/vue-router/dist/vue-router.js"></script>
    <!--css-->
    <style>
        .template {
            line-height: 100px;
            color: #ffff00;
            text-align: center;
        }

        .template h1 {
            font-size: 30px;
        }

        .list {
            background: #cccccc;
        }

        .home {
            background: #000;
        }

        .detail {
            background: #00f;
        }
    </style>
</head>
<body>
<!--
    1.首页 <-> 列表页   一级路由
    2. 列表页 -> 详情页 二级路由
    想实现一级路由,在实现二级路由
-->

<div id="app">
    <router-view></router-view>
</div>

<!-- templates -->
<template id="list">
    <div class="template list">
        <h1>
            这是list列表页
            <button @click="toIndex">去首页</button>
            <router-link to="/list/detail" tag="button">详情页</router-link>
        </h1>
        <!-- 二级路由 -->
        <router-view></router-view>
    </div>
</template>

<!-- javascript -->
<script>
    // components
    let home = Vue.extend({
        template: `<div class="template home"><h1>这是Index首页 <button @click="toList">去列表页</button></h1></div>`,
        methods: {
            toList() {
                this.$router.push('/list')
            },
        }
    });

    let list = Vue.extend({
        template: '#list',
        methods: {
            toIndex() {
                this.$router.push('/home')
            },
        }
    });

    let detail = Vue.extend({
        template: `<div class="template detail"><h1>这是详情页</h1></div>`,
    });

    let vueRouter = new VueRouter({
        routes: [
            {path: '', component: home},
            {path: '/home', component: home},
            {
                path: '/list', component: list,
                children: [{path: 'detail', component: detail,}],
            },
            {path: '*', redirect:'/home'},
        ],
    });
    const vm = new Vue({
        el: '#app',
        router: vueRouter,
    });
</script>

<!--
多级路由嵌套,先设置好一级路由,然后在一级路由的模板中设置子路由

<template id="list">
    <div class="template list">
        <h1>
            这是list列表页<button @click="toIndex">去首页</button>
            <router-link to="/list/detail" tag="button">详情页</router-link>
        </h1>
        <router-view></router-view>
      </div>
</template>
-->
</body>
</html>

路由(路径)参数

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue vue-router study</title>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script src="../node_modules/vue-router/dist/vue-router.js"></script>
</head>
<body>
<!-- app -->
<div id="app">
    <!-- 这里的show,test,three是路由的第二个参数 -->
    <router-link to="/article/1/show">第一篇文章</router-link>
    <router-link to="/article/2/test">第二篇文章</router-link>
    <!--<router-link to="/article/3/three">第三篇文章</router-link>-->
    <!--
        除了以上这种写法,还可以用对象作为 to 的值,
        如果用对象作为 to 的值,那么必须动态的绑定to属性(:to 或者 v-bind:to)
        并且使用参数,但是这种方式必须给路由起个名字,
        此时这个路由就不能再通过path跳转,必须通过路由名字
    -->
    <router-link :to="{name:'articles',params:{articleId:3, other:'three'}}">第三篇文章</router-link>
    <router-view></router-view>
</div>

<!-- javascript -->
<script>
    let article = Vue.extend({
        // 这里的 articleId 是配置 vueRouter这个实例的 routes属性时配置的参数 :articleId
        template: `<div>这是第 {{$route.params.articleId}} 片文章</div>`,
        // 如果要根据路径参数的变化来进行相应的操作,可以监控参数的变化来进行对应的操作
        watch: {
            $route(){
                alert("路径参数改变了.");
            }
        }
    });

    let vueRouter = new VueRouter({
        routes: [
            // 路径参数,表示值必须要有,但是值是动态的
            {path: '/article/:articleId/:other', component: article, name: 'articles'}
            // 设置的路由: /article/:articleId/:other
            // 访问的路由: /article/1/test
            // 最终会生成一个对象保存到 $route 属性中:  {articleId:'1',  other: 'test'}
            // 所以在取值是可以使用:  this.$route.articleId 来取出路由传递的参数
        ],
    });

    const vm = new Vue({
        el: '#app',
        router: vueRouter,
    });
</script>
</body>
</html>

路由切换动画

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue vue-router 路由切换动画</title>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script src="../node_modules/vue-router/dist/vue-router.js"></script>
    <style>
        .test {
            line-height: 50px;
            background: #000;
            color: skyblue;
            padding: 5px 15px;
        }
        .fadeIn {
            animation: fadeIn 1s ease-out forwards;
        }
        @-webkit-keyframes fadeIn{
            0%{ opacity: 0; }
            50%{ opacity: 0.5; }
            100%{ opacity: 1; }
        }

        .fadeOut {
            animation: fadeOut 1s ease-out forwards;
        }
        @-webkit-keyframes fadeOut{
            0%{ opacity: 1; }
            50%{ opacity: 0.5; }
            100%{ opacity: 0; }
        }
    </style>
</head>
<body>
<!-- app -->
<div id="app">
    <router-link to="/home">去首页页</router-link>
    <router-link to="/list">去列表页</router-link>
    <!--
        mode: 动画执行的模式, 默认两个动画时并行的
        in-out: 先进后出
        out-in: 先出后进
    -->
    <transition enter-active-class="fadeIn" leave-active-class="fadeOut" mode="out-in">
        <keep-alive>
        <router-view></router-view>
        </keep-alive>
    </transition>
    <!--
        频繁的切换组件是不停的销毁组件,创建组件,所以为了性能,需要使用
        <keep-alive></keep-alive> 这个全局组件类缓存组件
        要缓存哪个组件就使用使用keep-alive 把那个组件包起来
    -->
</div>

<!-- javascript -->
<script>
    let home = Vue.extend({
        template: `<div><p class="test">home首页</p></div>`,
    });
    let list = Vue.extend({
        template: `<div><p class="test">list列表页</p></div>`,
    });

    let vueRouter = new VueRouter({
        routes: [
            {path: '', component: home},
            {path: '/home', component: home},
            {path: '/list', component: list},
        ],
    });

    const vm = new Vue({
        el: '#app',
        router: vueRouter,
    });
</script>
</body>
</html>

转载于:https://www.cnblogs.com/liaohui5/p/10581652.html

weixin_34124577

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue vue-router 基本使用

官方教程: https://cn.vuejs.org/v2/guide/vue-route由于这不是vue必须的,但是在使用前需要先安装vue并且在使用前必须引入vue.js因为vue-router是依赖vue.js的安装npm install vue vue-router --save路由什么是路由?...
复制链接

扫一扫