vue学习-路由

1.作用:
前端路由：根据触发的不同的路径规则，呈现不同的页面(组件)在浏览器中
2.前提:
导入vue.js
导入vue-router.js
3.套路：
a.触发的超链接router-link和将来是用组件替换的区域router-view
b.定义组件
c.创建路由对象,配置路由规则(目的:触发了谁，把谁展示出来)
d.创建vm,将router路由注入（才能使用路由）

正式写代码:

<div id="app">
      //1.触发的超链接,to为点击跳转的路由，为匹配的路由规则
      <router-link to="/newslist">新闻列表</router-link>
      <router-link to="/goodslist">商品列表</router-link>
      <router-link to="/newsDetail/13">新闻详情</router-link>

      <!-- 我们这一块将来是用页面(组件)替换的(相当于视图) -->
      <router-view></router-view>
</div>

//1.定义好组件(不要注册)
    //定义新闻列表组件
    var newsListComponent = {
        template: '<ul><li>肾8来了</li><li>台风又要来了</li></ul>'
    }

    //商品列表组件
    var goodsListComponent = {
        template: '<ul><li>越南新娘</li><li>iPhone X</li><li>肾宝片</li></ul>'
    }

    //新闻详情组件
    var newsDetailComponent = {
        //可以通过$route.params.id 获取到'/user/:id'路由的参数了
        template: '<div>新闻详情---{{ $route.params.newsId }}</div>'
    }

//2.创建路由对象，设置好路由规则(目的:触发了谁，把谁(组件)展示出来)
    var router = new VueRouter({
        //具体的路由规则
        /**
        path:代表路径
        component:触发之后，要呈现的组件
        */
        routes : [
            {path:'/',component:newsListComponent},
            {path:'/newslist',component:newsListComponent},
            {path:'/goodslist',component:goodsListComponent},
            // 动态路径传送参数 以冒号开头
            {path:'/newsDetail/:newsId',component:newsDetailComponent}
        ]
    })
//3.创建vm,将router路由注入
    var vm=new Vue({
        el:"#app",
        router// 相当于router:router
    })

路由参数问题

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

2.  const User = {
            template: '<div>User {{ $route.params.id }}</div>'
          }

1.一个路径参数,使用冒号 : 标记。当匹配到一个路由时，参数值会被设置到 this.$route.params，可以在每个组件内使用($route.params.id就可以获得到传送过来的参数)

2.可以通过$route.params.id 获取到’/user/:id’路由的参数了