vue全家桶项目学习（二、vue-router 上篇）

一、使用

通过上一篇文章已经通过vue-cli4.0创建好了vue项目，首先项目默认router配置文件和组件中使用及main.js中挂载如下


在src/router/index.js路由配置文件中，首先通过import 引入vue和vue-router，然后创建路由列表routes。然后通过Vue.use(VueRouter)加载，通过const router = new VueRouter({ routes })创建路由实例，最后导出router。

然后在main.js中引用router，在vue实例中注册路由实例。

最后在组件中使用 router-link 组件来导航，通过传入 to 属性指定链接，<router-link> 默认会被渲染成一个 <a> 标签。路由匹配到的组件将渲染在<router-view>中。

项目首页点击切换Home和About，注意浏览器地址栏中url变化。

二、路由列表

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue')
  }
]

路由列表为一个数组，里面包含路由对象，一个基本路由对象包含：
path：路径，在url输入的路径。
component：组件，对应路径所需要渲染的组件。

// 此写法起到懒加载作用，当访问到这个页面时，才会加载此组件，起到优化作用。
component: () => import('../views/About.vue')

三、动态路由匹配

在src/router/index.js路由列表中添加一个路由对象

const routes = [
  ...
  {
  	// 动态路径参数 以冒号开头
    path: '/page1/:param',
    component: () => import('../views/page1.vue')
  },
]

在src/views中添加对应vue组件，page1.vue代码：

<template>
    <div>
        {{ $route.params.param }}
    </div>
</template>

浏览器访问http://localhost:8080/#/page1/xixi

组件中$route代表当前加载页面路由对象，里面包含一个params参数，params为一个对象，里面的para就是路由对象path: '/page1/:param'中的:param。

四、嵌套路由

增加路由对象

...
{
    path: '/page2',
    component: () => import('../views/page2.vue'),
    children: [
        {
            path: 'page3',
            component: () => import('../views/page3.vue')
        }
    ]
},
...

children为一个数组，里面包含着嵌套在page2里面的子集页面。注意：children中的path最前面不需要写/。

page2.vue组件：

<template>
    <div>
        page2
        <!-- /page2子集页面所对应的组件视图将渲染到<router-view>中。 -->
        <router-view/>
    </div>
</template>

page3.vue组件：

<template>
    <div>page3</div>
</template>

访问http://localhost:8080/#/page2/page3

五、命名路由

路由列表

...
{
    path: '/',
    name: 'Home',
    component: Home
},
{
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue')
},
...

App.vue

...
<router-link :to="{ name: 'Home' }">Home</router-link> 
<router-link :to="{ name: 'About' }">About</router-link>
...

name属性为路由到别名，<router-link>中to属性变为绑定属性，值为一个object，name值为路由对象中到name值（别名）。

六、命名视图

如果想在一个页面显示多个视图（比如：侧导航和主内容），并且每个视图显示在指定位置，就需要用到六命名视图。

App.vue

<template>
  <div id="app">
    <div id="nav">
      <router-link :to="{ name: 'Home' }">Home</router-link> |
      <router-link :to="{ name: 'About', params: { userID: 213 } }">About</router-link>
    </div>
    <router-view/>
    <router-view name="main" />
  </div>
</template>
...

在组件中建立多个<router-view>，指定name属性用来区别，不指定默认为default。

增加路由对象

{
    path: '/name_page',
    components: {
        default: () => import('../views/page2.vue'),
        main: () => import('../views/page3.vue')
    }
},

一个视图使用一个组件渲染，因此对于同个路由，多个视图就需要多个组件。确保正确使用 components 配置 (带上 s)
访问http://localhost:8080/#/name_page

七、重定向

增加路由对象

{
    path: '/reset',
    redirect: '/'
},

访问http://localhost:8080/#/reset时，会跳转回http://localhost:8080/#/
重定向目标可以为别名和方法

{
    path: '/reset',
    redirect: { name: Home }
},
{
    path: '/reset',
    redirect: to => '/'
},
{
    path: '/reset',
    redirect: to => { name: Home }
},

打印出to的值

八、别名

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

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

给/增加别名

{
    path: '/',
    name: 'Home',
    component: Home,
    alias: '/home'
},

访问http://localhost:8080/#/home时，显示的为http://localhost:8080/#/所对应的视图。

九、编程式导航

除了使用<router-link>创建a标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现，也就是通过js跳转页面。

About.vue组件增加一个button按钮绑定back事件

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <button @click="back">返回上一页</button>
  </div>
</template>
<script>
export default {
    methods: {
        back () {
            this.$router.go(-1);
        }
    }
}
</script>

this.$router为main.js中所注册的路由实例，go(-1)代表后退一页，go(1)表示前进一页，this.$router.back()同样表示后退。

除此，还可以通过$router跳转到指定路由：

// 跳转到/page2页面。
// push的值可以为字符串。
this.$router.push('/page2');
// 对象
this.$router.push({ path: '/page2' });
// 命名的路由(事先在/page路由设置name)
this.$router.push({ name: 'page2' });

如果我们到初始页面为home页面，然后跳转到about页面，在about页面中通过push跳转到page2页面，那么当我们在page2页面回退时则回退到about页面。这时，介绍$router的另一个方法replace。

this.$router.replace('/page2');

push的功能是在浏览历史中新增一个记录，而replace则是把当前记录替换成目标记录，所以，当从about页面执行replace方法跳转到page2页面后，再回退时当结果则是回退到home页而不是about页。

跳转页面中传递参数：

// 带查询参数，变成 /page2?param=123
this.$router.push({ path: '/page2', query: { param: 123 }})

跳转到之前配置的动态匹配路由，先给page1添加一个name属性

...
{
    path: '/page1/:param',
    name: 'page1',
    component: () => import('../views/page1.vue')
},
...

// 跳转后到路由为 /page1/123
this.$router.push({ name: 'page1', params: { param: 123 }})
// es6模板语法
const param = 123;
this.$router.push({ path: `/page1/${name}` })
// 错误写法
this.$router.push({ path: '/page1', params: { param: 123 }}) ❌