vue-router

vue-router

• 路由基本配置

• 路由跳转
  router-link
  编程式导航

• 动态路由

• 嵌套路由

• 导航守卫

• 路由懒加载

基本路由配置
1.安装router
2.在router下的index.js中配置

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

const routers = [
	{
    	path: '/',
	    name: 'Home',
   		redirect:'/price',	//重定向
   		component: () => import('../components/price/PriceEdit.vue'),	//路由懒加载
	  },
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

3.在main.js中调用index.js

import router from './router'
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

** 路由跳转 (router-link 编程式导航) **
router-link

<router-link to="/home">Home</router-link>	//跳转
<router-view/>		//展示

编程式导航

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

动态路由
方式一
-------操作路由用$router 获取路由参数用route
-------query 要搭配path路径，query像get请求
-------params只能由命名路由name来引入，params像post请求

<p>{{$route.params.id}}</p>

this.$router.push({path:'/home', query:{name:'deng'}})
this.$router.push({name:'home', params:{id:1}})

方式二

{
    path: '/price/id:1',
    name: 'Price',
    component: () => import('../components/price/Price.vue'),
  },

嵌套路由

{
    path: '/',
    name: 'Home',
    children:[{
      path: '/index',
      name: 'index',
      component: () => import('../components/index.vue'),
    }]
  },

导航守卫
router.beforeEach((to,from,next)

router.beforeEach((to,from,next)=>{
  // beforeEach(去向，来自，执行下一步)
  console.log(to.path)
  next()
})