声明式路由导航
router官网-起步
声明式路由导航其实就是使用官方给的<router-link>路由导航标签直接进行路由跳转
<body>
<div id="app"><!--<router-link>路由导航标签，用于找到path属性中url对应的组件，通过传入 `to` 属性指定链接.<router-link> 默认会被渲染成一个 `<a>` 标签--><router-link to="/login">注册</router-link><router-link to="/reg">登陆</router-link><!-- 路由出口<router-view>路由出口标签，相当于路由导航标签的一个中转站，通过点击不同的路由导航标签来实时的展示该导航标签所对应的组件，路由匹配到的组件将渲染在这里--><router-view></router-view>
</div>
<script>// 1. 定义 (路由) 组件。var login={template:'<div><h1>登陆页面</h1></div>'}var register={template: '<div><h1>注册页面</h1></div>'}//2.定义路由：创建全局路由对象var router=new VueRouter({//路由的配置/*** 路由模式：* 1.hash模式：默认的, http://localhost:8080/#/路由路径* 2.history模式：http://localhost:8080/路由路径** 使用mode属性切换路由模式*/mode: 'history',//路由列表，用于存放单个路由对象的数组routes:[/*** 单个路由对象用于描述路径url与组件的对应关系，有两个属性：path、component* path: 以/开头，路由路径* component: 路由路径对应的组件*/{path:'/login',component:login},{path:'/reg',component:register},]})new Vue({el: '#app',//3.在Vue对象中注册路由对象router})
</script>
</body>
编程式路由导航
router官网-编程式路由导航
除了使用 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现
<body>
<div id="app"><h1>欢迎使用路由导航</h1><h2>编程式导航</h2><p><!--开启路由导航--><button type="button" v-on:click="doQuery('/login',10,'tom')">登陆按钮</button><button type="button" v-on:click="doQuery('/reg',20,'jerry')">注册按钮</button><button type="button" v-on:click="doParams('user',30,'jack')">用户按钮</button><button type="button" v-on:click="doParams('emp',40,'lishi')">员工按钮</button></p><router-view></router-view>
</div><script>var login = {template: '<div><h1>登陆组件</h1><p>{{$route.query}}</p></div>'}var register = {template: '<div><h1>注册组件</h1><p>{{$route.query}}</p></div>'}var user = {template: '<div><h1>用户组件</h1><p>{{$route.params}}</p></div>'}var emp = {template: '<div><h1>员工组件</h1>{{$route.params}}</div>'}var router = new VueRouter({mode: 'history',routes: [//注册单个路由,有两个重要的属性：path(路由对应的路径)、component(路径对应的组件)//下面每个大括号包裹的都是一个单个路由，在配置路由时，可以为每一个路由起一个唯一的名字(名字任意只要不重复即可)，此路由被称为命名路由{path: '/login', name:'login', component: login},{path: '/reg', name:'reg', component: register},{path:'/user', name:'user', component:user},{path:'/emp', name:'emp', component:emp}]})new Vue({el: '#app',//在Vue对象中注册路由对象router,methods:{doQuery(path,id,name){/*** 编程式导航传参* 在push或replace方法中传入的不是路由路径，而是一个对象，该对象有两个重要的属性用于接收方法中的参数* 1.query传参：path属性对应的是路径，query属性对应的是参数对象** 2.params传参：name对应路由名称(要求路由必须为命名路由)，params参数对象.* 特点：1.无需使用动态路由匹配* 2.参数在传递的过程中隐藏，不会出现在地址栏中*/this.$router.push({path: path,query:{id:id,name:name}})},doParams(routeName,id,name){this.$router.push({name: routeName,//路由名称，如果将name换成path，则params里面的数据获取不到params:{id:id,name:name}})}}})
</script>
</body>
