vue学习笔记之vue-router路由参数的随意设置与伪静态链

断断续续在看后盾网的视频学vue，平时喜欢写在本子上，但是找起来真特别不方便，所以打算以后慢慢都写在这里。只是自己写的学习笔记，很多地方只是个人见解，不对的地方欢迎大家指正。
1.先引入vue.js和vue-router.js（在官网下载）

<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="js/vue-router.js" type="text/javascript" charset="utf-8"></script>

2.定义两个组件，tem1和tem2，然后把它们交给路由

<script type="text/x-template" id="tem1">
        <div>
            <h1>hello template1</h1>
        </div>
    </script>

 <script type="text/javascript">
            const tem1={
                template:"#tem1"
                }
            }
            const tem2={
                template:"<h2>hello template2</h2>"
            }
            let router=new VueRouter({//路由
                routes:[//path里是路径，对应写在router-link的to里，component是路径所对应展示的组件
                    {path:'/tem1',component:tem1},
                    {path:'/tem2',component:tem2},
                ]
            })
            new Vue({
                el:'#app1',
                data:{
                    
                },
                router//相当于router:router,将路由引入到#app1里
            })
        </script>

      <div id="app1">
            <!-- router-link标签就相当于a标签，to就相当于href属性-->
            <router-link to="/tem1">tem1</router-link>
            <router-link to="/tem2">tem2</router-link>
           <!-- 组件的内容会渲染到router-view标签里-->
            <router-view></router-view>
        </div>

结果：

image.png

点击tem1会展示组件tem1的内容，点击tem2会展示tem2的内容。
3.给vue-router配置参数

//给上面的路由配置加上参数id和cid（:后面的是参数名称,qqq前面不带:，所以它是常量）
        let router=new VueRouter({
                routes:[
                    {path:'/tem1/:id/qqq/:cid',component:tem1},
                    {path:'/tem2',component:tem2},
                ]
            })

获取参数：

//html获取:{{$route.params}},
js获取:this.$route.params

在组件htm1加上参数：

      <script type="text/x-template" id="tem1">
            <div>
                <h1>hello template1</h1>
                {{$route.params.id}}
                <br/>
                <button type="button" @click="show">检测参数</button>
            </div>
        </script>

      const tem1={
                template:"#tem1",
                methods:{
                    show:function(){//注意这个函数是子组件的，不能写在根组件下
                        console.log(this.$route.params)//打印参数
                    }
                }
            }

在地址栏参数位置对应输入常量，执行结果：

image.png

完整的html部分：

       <div id="app1">
            <router-link to="/tem1">tem1</router-link>
            <router-link to="/tem2">tem2</router-link>
            <router-view></router-view>
        </div>

完整的js部分：

       <script type="text/x-template" id="tem1">
            <div>
                <h1>hello template1</h1>
                {{$route.params.id}}
                <br/>
                <button type="button" @click="show">检测参数</button>
            </div>
        </script>
        <script type="text/javascript">
            const tem1={
                template:"#tem1",
                methods:{
                    show:function(){
                        console.log(this.$route.params)
                    }
                }
            }
            const tem2={
                template:"<h2>hello template2</h2>"
            }
            let router=new VueRouter({
                routes:[
                    {path:'/tem1/:id/qqq/:cid',component:tem1},
                    {path:'/tem2',component:tem2},
                ]
            })
            new Vue({
                el:'#app1',
                data:{
                    
                },
                router
            })
        </script>