10Vue.js创建路由

1.1Vue路由切换介绍

路由概念:是把数据从一个地方传送到另一个地方的行为和动作。
路由写法分为四个步骤: （1）定义组件（2）配置路由（3）创建对应的路由实例（4）router实例注入到vue

1.2Vue路由安装

安装方法可以直接在网上下载 vue-router.js 文件也可以通过 npm 提供的命令直接运行安装 npm install vue-router

1.3实现代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue的路由</title>
    <style type="text/css">
        .active{
            color: #f60;/* 为当前路由点击添加样式类*/
        }
    </style>
</head>
<body>
    <div id="app">
            <!-- router-link 导航 默认会被浏览器渲染成a标签-->
        <router-link to="/home">home</router-link>
        <router-link :to="'/news/'+id">news</router-link>
        <div>
            <!-- 出口文件 路由匹配的组件将渲染在出口文件中  -->
            <router-view></router-view>
        </div>
    </div>
    <script src="./js/vue.js" type="text/javascript"></script> <!-- 引入vue.js -->
    <script src="./js/vue-router.js" type="text/javascript"></script><!-- 引入vue-router.js -->
    <script type="text/javascript">
        /*定义组件*/
       /*  var Home={

            //在路由里面这种定义组件的方式也是可以的 看个人习惯而定
            template:'<h2>my News</h2>'

        } */

        var Home = Vue.component('Home', {

            template: '<h2>my world</h2>'
        });

        var News = Vue.component('News', {

            template: '<h2>my News{{$route.params.id}}</h2>'
        });

        /*配置路由*/

        var routes = [

            { path: '/home', component: Home },
            { path: '/news/:id', component: News },
            { path: '/*', redirect: '/home' },//重定向
        ]

        /*实例化路由 相当于一个管理者 来管理路由 */
        var router = new VueRouter({

            routes, //接收routes参数
            linkActiveClass:'active'  //点击时添加样式
        });

        var app = new Vue({

            el: "#app",
            router, //将路由注入到 VUE
            data: {

                msg: 'hello world',
                id:100
            },
            methods: {

                //这里写方法
                
            }
        });
    </script>
</body>
</html>

1.4最终效果图如下:

image.png

最后编辑于：2018.07.09 13:52:30