vue路由基本使用

一、路由基本概念与工作方式

Vue.js 路由允许我们通过不同的 URL 访问不同的内容。路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。路由模块的本质 就是建立起url和页面之间的映射关系。 其工作方式为:

1. 用户点击页面上的路由链接
2. 导致URL地址栏中的Hash值发生变化
3. 前端路由监听到了Hash地址变化
4. 前端路由把当前Hash地址对应的组件渲染到浏览器中

二、安装与配置路由

1、安装vue-router命令如下:

npm i vue-router@版本号 -S

2、配置路由:

如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能，用vue-cli生产了我们的项目结构，src文件目录下会有一个router文件夹，此处就是编写路由组件的地方。在src/router/index.js，这个文件就是路由的核心文件：

 
import Vue from 'vue'   //引入Vue
import Router from 'vue-router'  //引入vue-router
import Hello from '@/components/Hello'  //引入根目录下的Hello.vue组件(引入你想要的组件)
 
Vue.use(Router)  //调用.use()函数,把VueRouter安装为Vue的插件
//创建路由的实例对象
const router = new Router({
  routes: [              //配置路由，这里是个数组
    {                    //每一个链接都是一个对象
      path: '/',         //链接路径
      component: Hello   //对应的组件模板
    }，{
      path:'/hi',
      component:Hi,
      children:[        //子路由,嵌套路由 
        {path:'/',component:Hi},
        {path:'hi1',component:Hi1},
        {path:'hi2',component:Hi2},
      ]
    }
  ]
})
//向外共享路由的实例对象
export default router

三、router-link制作导航

1.router-link 是一个组件，它默认会被渲染成一个带有链接的a标签，通过to属性指定链接地址。

<router-link to="/">[需要展示的名称]</router-link>

• to里面需要填写的是导航路径，是你在router/index.js文件里配置的path值

2.router-view 用于渲染匹配到的组件。即一个占位符,用来给需要展示的组件占用位置

<router-view ></router-view>

• 也就是用它代替了普通的a链接

四、路由重定向

路由重定向是指在访问地址A的时候强制跳转到地址B,从而展示特定的组件页面,他是通过路由规则的redirect属性来实现

const router = new Router({
  routes: [  
{ path: '/', redirect: '/home'},
{ path: '/home', component: '/goods'}
]
})

五、动态路由

就是把Hash地址中可变的部分定义为参数项，从而提高路由规则的复用性。在vue-router中使用英文冒号(:)来定义路由的参数项

//冒号后面的就是动态参数的名称
{path:'movie/:id',componet: Movie}

在组件中获取动态参数的真实值：

1. $router.parms.参数名
2. 在声明路由里写上props：true，然后就可以在组件的props中用参数名直接接受真实值