vue-router基础

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. 项目结构

目录结构.png

搭建解析

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: '
   Foo
   '};
   const Bar = {template: '
   Bar
   '};
   // 先来一个简单的路由配置
   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,
   }
   {{$route.params.id}}
     
   

   高级路由配置

   模式	匹配路径	$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' }

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

   // 通过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来定义的路由配置

   User
   

   代码js调用路由配置

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

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

   ---

1. 命名视图

如果你想一个页面同时展示多个视图，而不是嵌套展示。例如：一个布局，有左边栏（sidebar）和 main(主内容)2个视图。这个时候命名视图就起到作用了，你可以在页面中拥有多个单独命名的视图，而不是只有一个单独的视图出口。如果router-view没有设置名称，则默认的是default

一个视图使用一个组件渲染，如果对于同一个路由，多个视图就需要多个组件。确保正确使用 components 配置（带上 s）：

const router = new VueRouter({
  routes: [
    {
      path: '/',
      components: {
        default: Foo,
        a: Bar,
        b: Baz
      }
    }
  ]
})

所以当我们浏览器访问根目录的时候，会渲染三个视图，分别对应三个组件。

---

1. 重定向和别名

重定向：指的是当我们访问一个路由的时候，需要把这个路由重新定位到一个新的路由，不使用原来的组件

别名： 当我们访问一个路由的时候，给它起一个小名，当我们访问这个小名的时候，还是会跳到那个路由。

重定向

重定向也是通过 routes 配置来完成，下面例子是从 /a 重定向到 /b：

const router = new VueRouter({
  routes: [
    {
      path: '/a',
      redirect: '/b',
      component: '...'
    }
  ]
})

重定向的目标也可以是一个命名空间的路由

const router = new VueRouter({
  routes: [
    {
      path: '/a',
      redirect: {name: 'foo'}
    }
  ]
})

甚至是一个方法，动态返回重定向目标

别名

『重定向』的意思是，当用户访问 /a时，URL 将会被替换成 /b，然后匹配路由为 /b，那么『别名』又是什么呢？

/a 的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样。

上面对应的路由配置为：

const route = new VueRouter({
  routes: [
    {
      path: '/a',
      component: A,
      alias: '/b'
    }
  ]
})