vue.js学习总计---路由篇

Posted 2020-10-19 wangpeiyuan

一、安装

1.下载 cnpm install vue-router

2.在router/index.js引入与使用

 

import Vue from ‘vue‘

import VueRouter from ‘vue-router‘

Vue.use(VueRouter)

impport Home from ‘./coponents/Home.vue
1.路由传参
export default new Router({
　　routers:[
　　　　{
　　　　　　path: ‘/Home/:id‘, 动态路由参数，以冒号开头
　　　　　　name: ‘Home‘,
　　　　　　component: Home
　　　　},
　　　　

　　　　{
　　　　　　path: ‘/‘,
　　　　　　name: ‘Home‘,
　　　　　　component: Home
　　　　},

　　]
})

const User = { template: ‘<div>User {{ $route.params.id }}</div>‘ } //获取路由参数
2.响应路由参数的变化
const user = {
　　template: ‘...‘,
　　watch:{
　　　　‘$route‘ (to,from){
　　　　　　
　　　　}
　　}
}
或者
const Use = {
　　template: ‘...‘,
　　beforeRoteUpddate(to,from,next){
　　
　　}
}