Vue的v-router介绍

1、路由v-router使用步骤

	1、在视图中 设置链接router-link to=“标识”

	2、在视图中设置容器touter-view

	3、在js中提供组件

	4、在js中配置路由routes=[{path和component}]

	5、在js中实例化router并且使用routes

	6、在js中newVue选项位置挂载路由router.router

<div id="app">
        <!-- 1、在视图中 设置链接router-link to="标识" -->
        <router-link to="one">HOME</router-link>
        <router-link to="two">Help</router-link>
        <router-link to="three">School</router-link>
        <!-- 2、在视图中设置容器touter-view -->
        <router-view></router-view>
    </div>
    <script src="vuejs-2.5.16.js"></script>
    <script src="vue-router.js"></script>
   <script>
        // 3、在js中提供组件
    var comA = {
        template:`<div>我是组件home</div>`
    }
    var comB = {
        template:`<div>我是组件help</div>`
    }
    var comC = {
        template:`<div>我是组件school</div>`
    }
    // 4、在js中配置路由routes=[{path和component}]
    var routes = [
        //重定向
        {path:'/',redirect:{name:'aaa'}},
        {name:'aaa',path:'/one',component:comA},
        {path:'/two',component:comB},
        {path:'/three',component:comC}
    ]
    // 5、在js中实例化router并且使用routes
    var router = new VueRouter({
        routes
    })
    // 6、在js中newVue选项位置挂载路由router.router
    new Vue({
        el:'#app',
        router
    })
   </script>

2、router-to属性赋值

	1、to值可以是固定的字符串

	2、to值可以是data中的数据  :to="data中的数据"

	3、to值可以是{path:"标识"} :to="{path:"标识"}"

	4、to值可以是{name:"路由配置的名字"}  :to="{name:"路由配置的名字"}"

<div id="app">
    <!-- 1、to值可以是固定的字符串 -->
    <router-link to="/aaa">aaa</router-link>
    <!-- 2、to值可以是data中的数据  :to="data中的数据" -->
    <router-link :to="two">bbb</router-link>
    <!-- 3、to值可以是{path:"标识"} :to="{path:"标识"}" -->
    <router-link :to="{path:'/ccc'}">ccc</router-link>
    <!-- 4、to值可以是{name:"路由配置的名字"}  :to="{name:"路由配置的名字"}" -->
    <router-link :to="{name:'ddd'}">ddd</router-link>
    <!-- 展示数据用router-view -->
    <router-view></router-view>
</div>

3、动态路由

动态路由：不同标识渲染同一个组件 -->spa项目中的详情组件可以用到

 代码位置在路由配置中的path属性{path：'/:id'}	视图中获取id值{{$route(路由配置对象).params.id}}

<script>
        // 3、在js中提供需要渲染组件
        // 视图中获取路当前渲染组件{{$route.params.id}} 
        // 注：id和下面path的:id值一致，如果下面path中的(:id)改成了(:abc),
           // 那么我们获取当前渲染组件就变成了{{$route.params.abc}}
    var comA = {
        template:`<div>我是组件---{{$route.params.id}}</div>`
    }
    // 4、在js中配置路由(设置路由匹配规则)
    var routes = [
        {path:'/:id',component:comA}
    ]
    // 5、在js中实例化router并且使用routes
    var router = new VueRouter({
        routes
    })
    // 6、在js中newVue选项位置挂载路由router.router 
    new Vue({
        el:'#app',
        router
    })
   </script>

4、编程式导航

编程式导航：this.$router.push({path:???,name:???})

<div id="app">
        <!-- 1、在视图中 设置链接router-link to="标识" -->
        <router-link to="one">HOME</router-link>
        <router-link to="two">Help</router-link>
        <router-link to="three">School</router-link>
        <button @click="chang()">按钮</button>
        <!-- 2、在视图中设置容器touter-view -->
        <router-view></router-view>
    </div>
    <script src="vuejs-2.5.16.js"></script>
    <script src="vue-router.js"></script>
   <script>
        // 3、在js中提供需要渲染组件
        // 视图中获取路当前渲染组件{{$route.params.id}} 
        // 注：id和下面path的:id值一致，如果下面path中的(:id)改成了(:abc),
           // 那么我们获取当前渲染组件就变成了{{$route.params.abc}}
    var comA = {
        template:`<div>我是组件comA</div>`
    }
    // 4、在js中配置路由(设置路由匹配规则)
    var routes = [
        {name:'aaa',path:'/:id',component:comA}
    ]
    // 5、在js中实例化router并且使用routes
    var router = new VueRouter({
        routes
    })
    // 6、在js中newVue选项位置挂载路由router.router 
    new Vue({
        el:'#app',
        router,
        methods:{
            // 编程式导航：this.$router.push({path:???,name:???})
            chang(){
                this.$router.push({name:'aaa'})
            }
        }
    })
   </script>

本次学习到这就结束啦，下次见咯!🐾