router的使用

路由和线路

路由router
表示当前项目全局的路由实例对象
跳转方法：push，replace，go，back

线路route
表示当前路由页面的信息对象
获取动态路由的参数：params

router跳转的两种方式

js跳转叫[编程式跳转]
<button @click="fn_target"></button>

fn_target(){
	this.$router.push('/home')
}

标签跳转叫【声明式】
<router-link to="/name"></router-link>

router-link

特性 默认是会被渲染成a标签 可以用tag属性修改

属性值

• to属性跳转到哪个页面和path对应 （相当于执行一次this.$router.push(’/name’)）
• replace属性，不需要写值，让页面不可回退，默认是push属性
• active-class用于修改单个class属性
• tag渲染成什么元素

router-view

router-view决定渲染组件位置

routes简单语法

【注意】：不要忘记引入组件

const routes = [
	  {
	    path: '',
	    // redirect重定向 ,相当于直接默认了home页面
	    redirect: '/home'
	  },
	  {
	    path: ' * ',
	    // 当访问组件不存在时默认返回home组件
	    redirect: '/home'
	  },
	  {
	  //路由嵌套(也需要一个视口)   地址显示为 /home/name
	  //【注意】子路由路径中不加 / 程序自动拼接
	    path: '/home',
	    component: Home,
	    children: [
	    		//重定向
		      { path: '', redirect: 'new' },
		      {
		        path: 'new',
		        component: New,
		      },
		      {
		        path: 'product',
		        component: Product,
		      }
	    ]
  	},
  	 {
  	 //动态路由
    	path: '/User/:userId',
    	//渲染时：this.$router.push(`/info/value`)
   		component: User
  	},
  	 // 路由懒加载(不用引入组件)  分割js文件（一个懒加载对应一个js文件），避免用户加载页面会出现短暂空白
 
	   //方式一：结合Vue异步组件和webpack的代码分析(知道即可，老项目有可能会出现)
	   //const Home = resolve => { require.ensure(['../components/Home.vue],()=>{
	   //resolve(require('../components/Home.vue')) })}
	   //方式二：AMD写法
	   //const About = resolve =>require(['../components/About.vue'],resolve)
	   //方式三：在ES5中，我们可以有更加简单的写法来组织Vue异步组件和Webpack的代码分割
	  { 
	    path: '/home',
	    component: ()=>import('../components/Home')
	  } 
  ]

router简单使用

const router = new VueRouter({
  routes,
  // 默认hash值，现在改成history模式
  mode: 'history',
  // 修改全局的class
  linkActiveClass: 'active'
})

路由传参的两种方式

params

• 隐式(不推荐) 静态路由使用params传参，地址栏不会带参数，所以刷新页面数据会丢，一般不使用
• 显示-动态路由传参。且必须使用路由命名的name属性，不可以使用path。使用params对象传递参数

//映射id  this.id=>this.$route.params.id
props:['id']

this.$router.push({

    name:'home',
    params:{id:1}
  })

// routes配置中要有相应的name
const routes = [
  {
    // 动态路由等于params显示传参
    name: 'home',   //给当前路由起一个名字，所以叫命名路由
    path: '/a/:id,
    component: () => import('./A.vue'),
    // props解耦，让组件的props解耦params参数(默认是false),可以简化语法
    props: true
  },
]


  

query

使用query传参，地址栏以get请求参数的形式表现。他没有动态路由优雅

// routes配置中要有相应的path
this.$router.push({
    path:'/home',
    query:{id:1}
  })