Vue Router的使用步骤(★★★)

A.导入js文件<script src="lib/vue_2.5.22.js"></script><script src="lib/vue-router_3.0.2.js"></script>

B.添加路由链接:<router-link>是路由中提供的标签，默认会被渲染为a标签，to属性默认被渲染为href属性，to属性的值会被渲染为#开头的hash地址<router-link to="/user">User</router-link><router-link to="/login">Login</router-link>

C.添加路由填充位（路由占位符）<router-view></router-view>

D.定义路由组件var User = { template:"<div>This is User</div>" }var Login = { template:"<div>This is Login</div>" }

E.配置路由规则并创建路由实例var myRouter = new VueRouter({

//routes是路由规则数组
routes:[
    //每一个路由规则都是一个对象，对象中至少包含path和component两个属性
    //path表示  路由匹配的hash地址，component表示路由规则对应要展示的组件对象
    {path:"/user",component:User},
    {path:"/login",component:Login}
]

})

F.将路由挂载到Vue实例中new Vue({

el:"#app",
//通过router属性挂载路由对象
router:myRouter

})

路由重定向：可以通过路由重定向为页面设置默认展示的组件在路由规则中添加一条路由规则即可，如下：var myRouter = new VueRouter({\

//routes是路由规则数组
routes: [
    //path设置为/表示页面最初始的地址 / ,redirect表示要被重定向的新地址，设置为一个路由即可
    { path:"/",redirect:"/user"},
    { path: "/user", component: User },
    { path: "/login", component: Login }
]

})