路由的基础使用流程
引入 vue-router.js (在 vue.js 之后)
- 定义相关的路由组件(定义方式与普通组件相同,只需要通过路由来跳转)
- 进行路由配置(路由表)
let routes =[ {path:'/',redirect:'/index'}, {path:'/index',component:Index}, {path:'/find',component:Find}, {path:'/order',component:Order}, {path:'/my',component:My}, {path:'/flower',component:Flower}, {path:'/detail/:id',component:Detail}, ];
- 新建路由对象,并进行配置
let router = new VueRouter({ mode:"hash",//默认hash模式,可切换至history // 配置路由数组 routes:routes })
- 在vue组件实例中配置路由
var vm = new Vue({ el: '#app', data: {}, methods: {}, router:router });
- 在模板中展示路由组件的位置,设置<router-view>
- 通过 router-link 标签中的to属性 实现路由跳转(默认解析为a标签,可以用tag属性改变为其他标签)
<router-link to="/index" tag="p">首页</router-link> <router-link to="/find" tag="p">发现</router-link>
路由的原理:
- 当mode 设置值为hash时:当url地址的hash值改变时,就会去路由表中进行匹配,进而找到路由对应的组件,将组件的模板渲染到router-view对应的位置 (url中带有#)
- 当mode 设置为history时,原理是利用HTML5中的history对象的新API ----history.pushState 来实现路由切换(url中不带#)
动态路由:
允许接收参数的路由成为动态路由,,对应 的组件成为动态路由组件
定义动态路由:
路由跳转的两种方式:
声明式导航:
通过<router-link>组件实现路由跳转
步骤:
1.配置路由
2.通过通过<router-link>组件实现路由跳转
3.在组件中接收参数
通过query传参
1.如果通过query