详解VUE路由

 

目录

单页面应用

vue路由

安装

router-link和router-view

简单的栗子：

动态路由

简单的栗子：

声明式和编程式导航

简单的栗子：

嵌套路由

命名路由

 命名试图

嵌套命名视图

重定向和别名

---

单页面应用

单页面应用就是访问页面不改变 改变的只是页面上边的内容 单页面应用通俗的称为spa应用

页面不刷新 只有一个页面          vue就是典型的单页面应用

vue路由

vue router的官方网站 查看文档

网址：https://router.vuejs.org/zh

安装

（1）可以使用cdn进行外部引入

https://unpkg.com/vue-router/dist/vue-router.js

（2）也可以使用npm来进行安装使用

npm install vue-router

router-link和router-view

router-link 和 router-view 是vue封装好的组件 不需要注册可以直接使用

路由组件 不需要进行注册的 而可以直接拿来使用的

普通组件 需要注册 才能进行使用

router-link相当于 html里边的a标签 to相当于a标签上边href属性

<router-link to="/index">首页</router-link>

router-view是用来渲染路由跳转后对应的组件模板的

<router-view></router-view>

简单的栗子：

        <router-link to="/index">首页</router-link>
        <router-link to="/detail">详情页</router-link>   
     // 1 定义(路由)组件
        const index={
            template: `
                <div class="index">这是首页</div>
            `
        }
        const detail={
            template: `
                <div class="detail">这是详情页</div>
            `
        }
        // 2 定义路由
        const routes=[
            {
                path: '/index',
                component: index
            },
            {
                path: '/detail',
                component: detail
            }
        ]
        // 3  创建router实例，配置routes
        const router=new VueRouter({
            // routes: routes
            routes
        })
        // 4 创建和挂载根实例
        new Vue({
            el: '#app',
            data: {

            },
            // router: router
            router
        })

动态路由

1.什么时候用动态路由

             如果有多个有规律路由 页面样式一致的情况下  就可以 使用动态路由

 2.想要在模板中获取到链接后缀参数

                $route.params.a    可以获取到链接后边动态值   http://www.demo.com/a

                $route.query.b      可以获取到链