vue-router 的简单应用

一、基本路由。

1、引入 vue.js。

<script type="text/javascript" src="../vue/vue.js"></script>

2、引入核心的插件 vue-router。

<script type="text/javascript" src="./node_modules/vue-router/dist/vue-router.js"></script>

3、安装插件 Vue.use(VueRouter)；  让 vue 使用该 VueRouter 创建。

Vue.use(VueRouter);

4、创建路由对象。 var router = new VueRouter({ });

var router = new VueRouter({ });

5、配置路由规则。

　　5.1、直接在路由对象里配置路由规则。 

var router = new VueRouter({
    // 4.配置路由对象
    routes:[
        // 5.路由匹配的规则
        {
            path:'/login',
            component:Login
        },
        {
            path:'/register',
            component:Register
        }
    ]
});    

　　5.2、使用路由对象，调用其 addRoutes 函数，并向其中传入路由配置规则。

6、将配置好的路由对象交给 Vue，在 options 传递，key 叫做 router。

// 8.将配置好的路由对象关联到vue实例化对象中
new Vue({
　　el:'#app',
　　router:router,
　　template:`<App />`,
　　components:{
　　　　App
　　}
});

7、留坑（使用组件）。<router-view></router-view>

<!--路由组件的出口-->
<router-view></router-view>

8、router-link 默认被渲染为 a 标签，to 默认被渲染为 href 属性。

<!--router-link默认会被渲染成a标签，to默认会被渲染成href属性-->
<router-link to = '/login'>登录</router-link>
<router-link to = '/register'>注册</router-link>

代码如下：

    <div id="app"></div>
    <!-- 1.先引入vue.js -->
    <script type="text/javascript" src="../vue/vue.js"></script>
    <!-- 2.引包 引入 核心的插件vue-router -->
    <script type="text/javascript" src="./node_modules/vue-router/dist/vue-router.js"></script>
    <script type="text/javascript">
        // 2.让vue使用该VueRouter创建
        Vue.use(VueRouter);
        //声明组件
        var Login  = {
            template:`<div>我是登录页面</div>`
        };
        var Register  = {
            template:`<div>我是注册页面</div>`
        };
        // 3.创建路由对象
        var router = new VueRouter({
            // 4.配置路由对象
            routes:[
                // 路由匹配的规则
                {
                    path:'/login',
                    component:Login
                },
                {
                    path:'/register',
                    component:Register
                }
            ]
        });
        // 抛出两个全局的组件 router-link  router-view
        var App = {
            template:`
                <div>
                    <!--router-link默认会被渲染成a标签，to默认会被渲染成href属性-->
                    <router-link to = '/login'>登录</router-link>
                    <router-link to = '/register'>注册</router-link>
                    
                    <!--路由组件的出口-->
                    <router-view></router-view>
                </div>
            `
        }
        // Cannot read property 'matched' of undefined
        // 5.将配置好的路由对象关联到vue实例化对象中
        new Vue({
            el:'#app',
            router:router,
            template:`<App />`,
            components:{
                App
            }
        });
    </script>

 

二、命名路由。

1、在创建路由对象时，给路由对象一个名称。{path: '/login', name: 'login', component: Login} 。

var router = new VueRouter({
　　// 3.配置路由对象
　　routes:[
　　　　// 4.创建路由匹配的规则
　　　　{
　　　　　　path:'/login',
　　　　　　name:'login',
　　　　　　component:Login
　　　　},
　　　　{
　　　　　　path:'/register',
　　　　　　name:'register',
　　　　　　component:Register
　　　　}
　　]
});

2、在 router-link 的 to 属性中 描述这个规则，通过名称找路由对象，获取其 path ，生成自己的 href。

<router-link :to="{name:'login'}">登陆</router-link>

代码如下：

    <div id="app"></div>
    <script type="text/javascript" src="../vue/vue.js"></script>
    <script type="text/javascript" src="./node_modules/vue-router/dist/vue-router.js"></script>
    <script type="text/javascript">
        // 0.安装插件
        Vue.use(VueRouter);
        // 1.声明Login、Register路由组件
        var Login = {
            template:'<div>我是登陆页面</div>'
        }
        var Register = {
            template:'<div>我是注册页面</div>'
        }
        // 2.创建路由对象
        var router = new VueRouter({
            // 3.配置路由对象
            routes:[
                // 4.创建路由匹配的规则
                {
                    path:'/login',
                    name:'login',
                    component:Login
                },
                {
                    path:'/register',
                    name:'register',
                    component:Register
                }
            ]
        });
        // 5.抛出两个全局组件 router-link router-view
        var App = {
            template:`
                <div>
                    <!-- router-link默认会被渲染为a标签，router-view默认会被渲染为herf标签 -->
                    <router-link :to="{name:'login'}">登陆</router-link>
                    <router-link :to="{name:'register'}">注册</router-link> 
                    <!-- 6.路由组件的出口 -->
                    <router-view></router-view>
                <div>
            `
        };
        // 6.将配置好的路由关联到vue实例对象中
        new Vue({
            el:'#app',
            router:router,
            template:` 
                <App/>
            `,
            components:{
                App,
                router
            }
        });
    </script>

 

大大降低了维护成本，锚点值改变只用在main.js中改变path属性即可。

总结：

vue-router 的使用步骤：1、引入。2、安装插件。3、创建路由实例。4、配置路由规则。5、将路由关联到 Vue。6、留坑。

router-link  普通路由   to="/xxx"。

命名路由：1、在路由规则对象中加入 name 属性。

　　　　　2、在 router-link 中 :to="{name: 'xxx'}"。

生僻 API 梳理：

　　1、Vue.use(插件对象)； // 过程中会注册一些全局组件，及给 vm 或者组件对象挂载属性。

　　2、给 vm 及组件对象挂载的方式：Object.defineProperty(Vue.prototype,'$router',{  get:function () {    return 自己的router对象;　} });