路由

#### 路由（vue-router）是vue的工具库

##### vue.js路由允许我们通过不同的URL访问不同的页面

Vue.js 路由需要载入 [vue-router 库](https://github.com/vuejs/vue-router)

中文文档地址：[vue-router文档](http://router.vuejs.org/zh-cn/)。

##### 下载 vue：npm install vue

##### 下载vue-router：npm install vue-router

### 路由步骤

## 1.HTML

例：<router-link to='/home'>首页</router-link>


<router-view></router-view>
//（展示详细内容）

## 2.创建组件

例：var 组件名={
template
}
var Home={
template:<h1>这是首页<h1>
}

## 3.配置路由

例：const routes=[
{path:'/路径'，component:组件}
]
{path:'/',component:Home},
/--默认第一页--/
{path:'/home',component:Home},

## 4.创建一个路由实例

例：const router=new VueRouter({
(固定)routes:routes
})

## 5.把路由实例挂在vue实例上

new Vue({
el:'#app',
router:router
})

##### 路由的总写

<div id="app">

<router-link to='/home'>首页</router-link>
<router-link to='/second'>详情页</router-link>

<router-view></router-view>
</div>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
<script type="text/javascript">
/2.创建组建/

        var Home={
            template:`
            <h1>这是首页<h1>                `
        }
        var Second={
            template:`
            <h2>这是详情页</h2>  `
        }
        /*3.配置路由*/
        const routes=[
        /*--{path:'/路径',component:组件}--*/
        {path:'/',component:Home},
        /*--默认第一页--*/
        {path:'/home',component:Home},
        {path:'/second',component:Second}
        ]
        /*4.创建一个路由实例*/
        const router=new VueRouter({
         routes:routes
    })
        //把路由挂在到vue实例上
   new Vue({
       el:'#app',
       router:router
   })
    </script>

#### 注意：

const:声明常量，const定义的变量不可以修改，而且必须初始化
var: 在es5中声明变量,变量可以修改，如果不初始化会输出undefined，不会报错
let: 在es6中声明变量 ，块级作用域，函数内部使用let定以后，对函数外部无影响

作者：笨小妞_9ed3
链接：https://www.jianshu.com/p/e387f55d8a97
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。