Vue-router--- 安装及基本配置

js代码：

/**
 * Created by luoxy on 2018/5/28.
 */
var routes = [     //定义规则
    {
        path:'/',    //使用'/'符号代表首页路径
        component:{
            template:'<div><div>首页</div></div>'
        }
    },
    {
        path: '/about',    //使用/about代表关于我们界面路径
        component: {
            template: '<div><div>关于我们</div></div>'
        }
    },{
path:'/user/:name',
component:{
template:

'<div><div>姓名{{$route.params.name}}</div><div>age{{$route.query.age}}</div></div>'

                //两种获取参数的方法：{{$route.params.name}}---获取html页面中的参数

                //{{$route.query.age}}----在地址栏查询方式获取数据

}

},


];
var router = new VueRouter({    //将规则赋给路由的路径
    routes : routes,
});
new Vue({    //定义vue将路由赋给路由
    el:"#app",
    router:router,

})

html代码：

<div id="app">
    <div>
            <router-link to="/">首页</router-link>
            <router-link to="/about">关于我们</router-link>
            <router-link to='/user/whh'>whh</router-link>
            <router-link to='/user/llz'>llz</router-link>   
        </div>
        <div>
    <router-view></router-view>    //路由展现的视图，只有有这个标签才能显示出路由中的东西
    </div>

    </div>