一、路由配置(如何使用vue-router)
1.安装
npm install vue-router --save //cnpm install vue-router
2.引入并且 使用(main.js)
import VueRouter from 'vue-router'
Vue.use(VueRouter)
3.配置路由(main.js)
3.1 创建组件 引入组件
import User from './components/User.vue'
3.2 定义路由(建议复制)
const routes = [
{path:'/user',component:User},
{path:'*',redirect:'/user'} //默认跳转路由，匹配不到就跳转/user
]
3.3 实例化 VueRouter(main.js)
const router = new VueRouter({
//mode: 'history',//配置后URL上的#会消失
routes// (缩写) 相当于routers:routes
})
3.4 挂载(main.js)
new Vue({
el:"#app",
router,
render:h=> h(App)
})
3.5 根组件的模板里边使用(组件中)
<router-view></router-view>
3.6 路由跳转
<router-link to="/user"> Go to User</router-link>
二、路由跳转三种方式
<router-link to="/user"> Go to User</router-link> （点击实际也调用的是push）
-
push 注意：如果提供了 path，params 会被忽略。但是query 可以和path配合使用，这种情况下 query传递的参数会显示在url后面例如：
http://localhost:8081/#/newsDetail?id=？// 字符串 home 是路径 router.push('home') // 对象 home 是路径 router.push({ path: 'home' }) // 命名的路由 User是路由的重命名 router.push({ name: 'User', params: { userId: '123' }}) // 带查询参数，变成 /register?plan=private router.push({ path: 'register', query: { plan: 'private' }})
3.History 用url的hash来模拟一个完整的URL
笔者也未理解(- - ！)
有兴趣深入了解History的同学请查看官网https://router.vuejs.org/zh/guide/essentials/history-mode.html
三、路由重定向
重定向是通过 routes 配置来完成,记得关键字redirect即可。
const router = new VueRouter({
routes: [
{ path: '/a', redirect: '/b' }
{ path: '*', redirect: '/c' }
]
})
-
{ path: '/a', redirect: '/b' }代表路由跳转路径为a时候就重定向到b -
{ path: '*', redirect: '/c' }中的*代表未匹配到目标路由时就重定向到c
四 编程式导航
前进与后退
this.$router.go(-1) 和 this.$router.go(1)
五、路由传值
1.父组件push使用this.$router.push
2.在子组件中获取参数的时候是this.$route.params
1 、动态路由传值
1.1 配置动态路由
routes:[
//动态路由参数 以冒号开头
{path:'/user/:id',conponent:User}
]
1.2 传值
第一种写法 : <router-link :to="'/user/'+item.id">传值</router-link>
第二种写法 : goToUser(id) {
this.$router.push( {path:'/user/'+id});
}
1.3 在对应页面取值
this.$route.params; //结果:{id:123}
2、 Get传值(类似HTMLGet传值）
2.1 配置路由
const routes = [{path:'/user',component:User},]
2.2 传值
第一种写法 : <router-link :to="'/user/?id='+item.id">传值</router-link>
第二种写法 : goToUser(id) {
//'user' 是路径名称
this.$router.push({path:'user',query:{ID:id}});
}
2.3 在对应页面取值
this.$route.query; //结果 {id:123}
Tips：路径传递参数会拼接在URL路径后
3 、命名路由push传值
3.1 配置路由
const routes = [{path:'/user',name: 'User',component:User},]
3.2 传值
goToUser(id) {
//'User' 是路径重命名
this.$router.push({name:'User',params:{ID:id}});
}
3.3 在对应页面取值
this.$route.params; //结果:{id:123}
Tips：命名路由传递参数不在URL路径拼接显示
