路由

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

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

Vue.js 路由需要载入 vue-router 库

中文文档地址：vue-router文档。

下载 vue：npm install vue

下载vue-router：npm install vue-router

路由步骤

1.HTML

  <!-- 使用 router-link 组件来导航. -->
 <!-- 通过传入 `to` 属性指定链接. -->
   <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
例：<router-link to='/home'>首页</router-link>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
//（展示详细内容）

2.创建组件

 <!--每个路由应该映射一个组件。 -->
例：var 组件名={
          template`  `
}
    var Home={
                template:`
                <h1>这是首页<h1>                `
            }

3.配置路由

 <!-- 创建 router 实例，然后传 `routes` 配置 -->
例：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">
            <!--1.-->
            <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定以后，对函数外部无影响