Vue-router学习指南

[huangchucai]

Vue-router学习指南

日记：本文按照vue-router官网的知识结合例子进行分析和讲解，搭建工具（vue-cli,vue-router）

基本搭建

1. 安装vue-cli

   npm install -g vue-cli
   

2. 通过webpack搭建

   // 初始化项目
   vue init webpack Your-projectName
   // 安装依赖
   npm i 
   // 启动项目
   npm run dev

3. 项目结构

搭建解析

1. route下面的index（一个主观的认识，之后会有详细的解释和干货）

   // 引入依赖
   import Vue from 'vue'
   import Router from 'vue-router'
   
   // 引入组件
   import DemoAbout from '@/components/DemoAbout'
   import DemoContact from '@/components/DemoContact'
   import DemoHome from '@/components/DemoHome'
   import DemoContactChild1 from '@/components/DemoContactChild1'
   
   //vue使用vue-router 
   Vue.use(Router)
   // 导出内容给main.js使用
   export default new Router ({
    	// routes数组,里面是每一个路由配置  
       routes: [
       {
         path: '/', 
         name: 'Home', 
         component: DemoHome
       },
       {
         path: '/contact/:id?',
         name: 'Contact',
         component: DemoContact,
         children: [
           {
             path: 'hello',
             component: DemoContactChild1
           }
         ]
       },
       {
         path: '/about',
         name: 'About',
         component: DemoAbout
       },
     ]
   })

   • 解析

     1. path: 对应的路径。name: 路由的命名。component: 对应的组件

     2. 上面的@是怎么来的呢？通过webpack的别名alias来定义目录

     // 找到build下面的webpack.base.conf.js配置 21行
       resolve: {
         extensions: ['.js', '.vue', '.json'],
         alias: {
           'vue$': 'vue/dist/vue.esm.js',
           '@': resolve('src')
         }
       },
       // 找到resolve 6行
       function resolve (dir) {
       	return path.join(__dirname, '..', dir)
       }  
      // 所以得到@是运行文件下的src的简写

路由解析

1. 简单的路由配置

   //组件
   const Foo = {template: '<div>Foo</div>'};
   const Bar = {template: '<div>Bar</div>'};
   // 先来一个简单的路由配置
   const routes = [
     {path: '/foo', component: Foo},
     { path: '/bar', component: Bar }
   ]
   // 我们需要实例化routes
   const route = new Router({
    	routers
   })
   // 然后我们需要挂载实例并通过route组件路由，然后就可以全局使用了
   const app = new Vue({
     el: '#app',
     route
   })

   通过上面的例子，我们已经对路由有了一个大致的认识，接下来介绍动态路由配置和嵌套路由

2. 动态路由配置和嵌套路由

动态设置路由： 以冒号开头。{ path: '/user/:id', component: User }通过{{$route.params.id}}或者this.$route.params.id获取值。

// 如果学习了express.js的部分就知道，对应路由的配置是可以通过正则和动态路由参数来传递
{
  path: '/contact/:id?', //正则匹配，可以传递id也可以不传id
  name: 'Contact',
  component: DemoContact,
}
<div>{{$route.params.id}}</div>  

高级路由配置

模式	匹配路径	$route.params
/user/:username	/user/evan	{ username: 'evan' }
/user/:username/post/:post_id	/user/evan/post/123	{ username: 'evan', post_id: 123 }
/user/:username/post/:id?	/user/evan/post	{ username: 'evan' }

路由嵌套：页面通过<router-view></router-view>实现页面的显示路由，我们在路由中通过children来配置子路由单元。通过页面的router-view来展示相应的子路由

<! --我们在DemoContact中配置router-view -->
<template>
  <div id="contact">
    <h2>this is contact</h2>
    <!--设置子路由配置-->
    <router-view></router-view>
  </div>
</template>

// 通过children子元素来配置相应的子路由单元
routes: [
  {
      path: '/contact/:id',
      name: 'Contact',
      component: DemoContact,
      children: [
        {
          path: 'hello',
          component: DemoContactChild1
        }
      ]
  },
]

注意： 由于带有/就是目录的根目录，所以我们在配置子路由的时候不要写成/hello，否则就不会配置相应的路径。

3. 编程式路由

   *需求：*如果我们需要在组建的js部分跳转页面怎么弄？

   在html模板中，我们可以通过router-link来显示页面路由的跳转，在js模板中，我们则需要通过router.push()来实现

   • router.push(location) 如果不是绝对目录就会替换当前路由的最后一个路径配置

     // 字符串跳转path
     // 当前页面是http://localhost:8080/#/contact
     router.push('home')   //http://localhost:8080/#/about
     // 当前页面是http://localhost:8080/#/contact/600
     router.push('home')      // http://localhost:8080/#/about
     router.push('/home')	 //http://localhost:8080/#/about
     
     // 对象
     router.push({ path: 'home' })
     
     //路由的命名
     router.push({ name: 'user', params: { id: 123 }})
     
     // 带查询参数，变成 /register?plan=private
     router.push({ path: 'register', query: { plan: 'private' }})
     
     //js模板中使用
     this.$route.push()
     this.$router.push({name: 'Contact',params: {id: 6000}})  //注意带参数。一定是name

     **特别注意：**当我们需要传递params的时候，一定是通过name来实现页面的跳转，不能通过path。

     声明式	编程式
     	router.push(...)

4. 命令路由

   有时候，我们需要通过一个简单的名字来实现跳转，这样我们可以在实例化路由的时候，通过name，来实现跳转和传参。

   // 通过name来实例化路由配置
   const router = new VueRouter({
     routes: [
       {
         path: '/user/:userId',
         name: 'user',
         component: User
       }
     ]
   })

   跳转通过name来定义的路由配置

   <router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

   代码js调用路由配置

   this.$router.push({name: 'user',params: {userId: 123}}) 

   上述2中方式都会把路由导航到name: user相对应的路由配置/user/123

[huangchucai]

add (redirect,alias)