Vue.js学习笔记（4）-Route

Route

路由，其实就是指向的意思，路由允许我们通过不同的 URL 访问不同的内容,当我点击页面上的home  按钮时，页面中就要显示home的内容，如果点击页面上的about 按钮，页面中就要显示about 的内容。Home按钮  => home 内容， about按钮 => about 内容，也可以说是一种映射。 通过路由，我们可以在同一个网页上浏览到不同的内容。所以在页面显示中，有两个部分，一个是需要点击的部分，一个是点击之后，显示点击内容的部分。

route基本使用

要实现路由功能一共有四个步骤：

1.定义路由组件（也就是点击之后的各部分的内容）

2.定义路由

3.创建和配置路由实例

4.创建和挂载根实例（将陆游注入到根实例，是整个网页都具有路由功能）

5.导航和渲染

1.定义路由组件

const home = Vue.extend({ template: '<div>this is home</div>' })
const about = Vue.extend({ template: '<div>this is about</div>' })

当组件功能较多的时候，也可以将组件写在另外的文件通过import包含进来。

2.定义路由

const routes = [
  { path: '/home', component: home },
  { path: '/about', component: about }
]

一条路由最基本有两个属性，path和component，path是路径，component是它所对应的组件，定义了路由，也就建立了一个映射关系。

3.创建和配置路由实例

const router = new VueRouter({
  routes // （缩写）相当于 routes: routes
})

4.创建和挂载根实例

const app = new Vue({
  router
}).$mount('#app')

5.导航和渲染

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <router-link to="/home">home</router-link>
    <router-link to="/about">about</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>

然后了，就可以开始使用了。

在vue-route中，提供了一种隐式的引用路径，即命名路由，通过路由的名称取代URL的直接引用。

只需要在定义路由时添加上一个name属性，例如：

const routes = [
  { path: '/home', name：'home', component: home },
  { path: '/about', name：'about', component: about }
]

在导航的时候,用”:to“而不是”to“，引用的是一个对象而不是URL

<router-link to="{name:'home'}">home</router-link>

route重定向

完成了路由配置之后，这时点击页面上的home 和about 可以看到组件来回切换。但是有一个问题，当首次进入页面的时候，页面中并没有显示任何组件。我们想让页面一加载进来就显示home页面，这需要重定向，所谓重定向，其实就是重新给它指定一个方向，比如当用户点击home 的时候，我们让它指向about.

const routes = [
  {
    path:"/home",
    component: home
  },
  {
    path: "/about",
    component: about
  },
  // 重定向
  {
    path: '/', 
    redirect: '/home'
  }
]

网页重定向还有一个用处，如果在定义路由时加上

{path: '*', redirect: '/home'}

那么当你输入未定义的路由时，网页会跳转到home界面，这样子便增强了容错性。

嵌套路由

实现简单的多层路由。

首先注册home组件

const home={
template:"
<div>
  <router-link to="/register">注册</router-link>
  <router-link to="/login">登陆</router-link>
<router-view></router-view>
</div>"}

然后再注册home里面的子组件

接着是定义路由

{path:'/index',component:home,
     children:[
     {path:'register',component：register}，
     {path:'login',component:login},
 ]

引入children来进行嵌套

如果使用这种语法

{path:'/home/login',component:login}

虽然写法易懂，但是这样写的话就直接访问login界面而跳过了home界面，这不是我们想要的，我们希望通过home来进一步访问子界面。而且引入children属性也使得代码可读性更高，组件之间的从属关系更加清晰。

动态路由配置

我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个 user 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。那么，我们可以在 路由路径中使用『动态路径参数』，我直接贴上官网的代码：

const User = {
  template: '<div>User</div>'
}

const router = new VueRouter({
  routes: [
    // 动态路径参数 以冒号开头
    { path: '/user/:id', component: User }
  ]
})