vue路由配置及两种路由跳转方法
2018-11-02 18:35
645 查看
路由
1.Vue-rotuer开发(五步法)
1)新建router目录
通过npm安装vue-router
Npm install --save vue-router
2)在index.js中使用Vue.use()加载插件:
[code] import Vue from 'vue' import App from './App' import VueRouter from 'vue-router' Vue.use(VueRouter);//注册路由
3)配置路由(index.js)
[code]export default new Router({ routes: [ { path : ‘/’, //到时候地址栏会显示的路径 name : ‘Home’, component : Home // Home是组件的名字,这个路由对应跳转到的组件。。注意component没有加“s”. }, { path : ‘/content’, name : ‘Content’, component : Content } ], })
又在main.js中完成配置和路由实例
[code]import Vue from 'vue' import App from './App' import router from './router' var vue=new Vue({ el: '#app', router, components: { App }, template: '<App/>' })
4)<router-link :to=”/home”></router-link>路由入口
配置完成后在对应根实例app.vue中添加路由视图<vue-router></vue-router>来挂载所有路由组件:
[code]<template> <div> <router-view></router-view> </div> </template> <script> export default { } </script>
路由跳转
两种方法:
1.内置<router-link></router-link>组件,它被渲染为<a>标签:
<router-link :to="/about">跳转到about</router-link>
设置一个导航链接,切换不同 HTML 内容。 to 属性为目标地址, 即要显示的内容。
2.使用router实例的方法,比如在about.vue中通过点击事件跳转:
[code]<template> <div> <button @click="handleRouter">跳转到user</button> </div> </template> <script> export default { methods:{ handleRouter(){ this.$router.push("/user"); } } </script>
阅读更多
相关文章推荐
- vue2.0子路由配置和跳转 vue-router: 嵌套路由
- struts2从一个action跳转到另一个action的两种配置方法
- [配置]Vue项目配置ECharts的两种方法
- vue-cli 配置路由之间跳转传递参数
- vue基础教程(四) - 路由的配置、跳转、传参、嵌套
- vue-cli 配置路由>>跳转传递参数
- vue-router之nuxt动态路由设置的两种方法小结
- vue路由拦截及页面跳转的设置方法
- Vue路由传参与取值的两种方法
- Vue利用路由钩子token过期后跳转到登录页
- vue 如何实现在函数中触发路由跳转
- java:comp/env/jdbc/ 的两种配置方法
- 配置 yum 源的两种方法
- React-router v4 路由配置方法小结
- vue配置多页面的实现方法
- Struts2中action重定向跳转到jsp页面两种配置方式
- vue脚手架中配置Sass的方法
- spring中配置jdbc.properties的两种方法
- vue-cli 3.x 配置Axios(proxyTable)跨域代理方法
- vue中接口域名配置为全局变量的实现方法