03-vue-router

前端路由的实现原理

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title>
</head>
<body>
<!--SPA : Single Page Application前端路由1.锚点值 监视2.ajax获取动态的数据3.核心点是锚点值的改变前端中 vue|react|angular 都很适合做单页面应用--><a href="#/login">登录页面</a>
<a href="#/register">注册页面</a>
<div id="app"></div><script type="text/javascript">// onhashchange 事件  url上的锚点数据（#/xxx改变）var oDiv = document.getElementById('app');window.onhashchange = function () {console.log(location.hash);// 根据不同的锚点值，对页面不同的切换。switch (location.hash) {case '#/login':oDiv.innerHTML = '<h2>登录页面</h2>';break;case '#/register':oDiv.innerHTML = '<h2>注册页面</h2>';break;default:// statements_defbreak;}}
</script></body>
</html>

View Code

vue+vue-router 主要来做单页面应用（Single Page Application）

为什么我们要做单页面应用？

（1）传统的开发方式 url改变后，立马发送请求，响应整个页面，有可能资源过多，传统开发会让前端的页面出现 “白屏” 用户体验不好（2）SPA 单页面应用 ： 锚点值的改变后，不会立刻发送请求，而是在某个合适的时机，发送ajax请求，局部改变页面中的数据页面不立刻跳转用户体验好

vue-router集成

它是vue中核心插件

下载vue-router
```
npm init --yesnpm install vue-router --save
```
- 引入vue-router的模块默认会抛出一个VueRouter对象另外还有两个全局的组件router-link 和router-view
Vue.use(VueRouter)
创建路由对象

var router = new VueRouter({// 配置路由对象routes:[{ path:'/login', name:'login', component:Login},{ path:'/register', name:'register', component:Register}]});

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="vue.js"></script>
<!-- 1.引入 vue-router的对象 -->
<script type="text/javascript" src="./node_modules/vue-router/dist/vue-router.js"></script>
<!-- 全局的VueRouter对象   vue-router 还给咱们提供了两个全局的组件 router-link  router-view-->
<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({// 配置路由对象
routes: [{path: '/login',component: Login},{path: '/register',component: Register}]});var App = {<!--router-link默认会被渲染成a标签 to属性默认会被渲染成href属性-->template: `<div><router-link to="/login">登录页面</router-link><router-link to="/register">注册页面</router-link><router-view></router-view></div>
            `, <!--路由组件的出口-->};new Vue({el: '#app',components: {App},router,      //使用路由，不然会报错
        template: `<App />`
});</script></body>
</html>

02-router 使用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="vue.js"></script>
<!-- 1.引入 vue-router的对象 -->
<script type="text/javascript" src="./node_modules/vue-router/dist/vue-router.js"></script>
<!-- 全局的VueRouter对象   vue-router 还给咱们提供了两个全局的组件 router-link  router-view-->
<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({// 配置路由对象
        routes: [{path: '/login',name: 'login',component: Login},{path: '/register',name: 'register',component: Register}]});var App = {// 绑定路由
        template: `<div><router-link :to="{name:'login'}">登录页面</router-link><router-link :to="{name:'register'}">注册页面</router-link><router-view></router-view></div>`//路由组件的出口
    };new Vue({el: '#app',components: {App},router,template: `<App />`
    });
</script>
</body>
</html>

03-命名路由

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="vue.js"></script>
<!-- 1.引入 vue-router的对象 -->
<script type="text/javascript" src="./node_modules/vue-router/dist/vue-router.js"></script>
<!-- 全局的VueRouter对象   vue-router 还给咱们提供了两个全局的组件 router-link  router-view-->
<script type="text/javascript">// 路由范式// (1)xxxx.html#/user/1         params// (2)xxxx.html#/user?userId = 2    query// 2.让Vue使用该VueRouter创建
    Vue.use(VueRouter);var UserParams = {template: `<div>我是用户1</div>
            `,created() {console.log(this.$route.params.userId);// 发送ajax请求
            console.log(this.$router);}};var UserQuery = {template: `<div>我是用户2</div>
            `,created() {console.log(this.$route);// 发送ajax请求
            console.log(this.$router);  // 总的 router 对象
            console.log('route',this.$route)   // 单个的route 对象
}};// 3.创建一个路由对象var router = new VueRouter({// 配置路由对象
        routes: [{   // 动态的路由参数 以冒号开头
                path: '/user/:userId',name: 'userp',component: UserParams},{path: '/user',name: 'userq',component: UserQuery}]});var App = {<!--router-link默认会被渲染成a标签 to属性默认会被渲染成href属性-->template: `<div><router-link :to="{name:'userp',params:{userId:1}}">用户1</router-link><router-link :to="{name:'userq',query:{userId:2}}">用户2</router-link><router-view></router-view></div>
            `,<!--路由组件的出口-->};new Vue({el: '#app',components: {App},router,template:`<App />`
    });
</script>
</body>
</html>

04-路由参数


4.路由对象挂载到vue实例化对象中var App = {  template:`   <div>    <!--router-link默认会被渲染成a标签 to属性默认会被渲染成href属性-->    <router-link :to="{name:'login'}">登录页面</router-link>    <router-link :to="{name:'register'}">注册页面</router-link>

    <!--路由组件的出口-->    <router-view></router-view>   </div>  ` }; new Vue({  el:'#app',  components:{   App  },  //挂载  router,  template:`<App />` });

命名路由

给当前的配置路由信息对象设置name:'login'属性

:to = "{name:'login'}"

路由范式

(1)xxxx.html#/user/1 配置路由对象中

         {            path:'/user/:id',     component:User    }    <router-link :to = "{name:'user',params:{id:1}}"></router-link>

(2)xxxx.html#/user?userId = 1

{ path:'/user' } <router-link :to = "{name:'user',query:{id:1}}"></router-link>

在组件内部通过this.$route 获取路由信息对象

嵌套路由

一个router-view 嵌套另外一个router-view

动态路由匹配

let User = {  template: '<div>User</div>'}let router = new VueRouter({  routes: [    // 动态路径参数 以冒号开头   { path: '/user/:id', component: User } ]})

现在呢，像 /user/foo 和 /user/bar 都将映射到相同的路由。

一个“路径参数”使用冒号 : 标记。当匹配到一个路由时，参数值会被设置到 this.$route.params，可以在每个组件内使用。于是，我们可以更新 User 的模板，输出当前用户的 ID：

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

转载于:https://www.cnblogs.com/wenyule/p/10122747.html

03-vue-router相关推荐

vue router 入门笔记
vue router 入门笔记 tips: components优先级大于component,即当一个route对象里同时配置了component和components时component视为无效即 ...
你可能不清楚的 Vue Router 深度用法（一）
Vue Router 简单易上手,能实现大部分的需求.但是,如果在项目里需要更细致的控制路由,以实现与其同步的效果,就需要挖掘其文档里没详细提及的内容.第一章为路由元信息用途挖掘. 路由元信息用途 ( ...
vue router html,vue-router.html
Document Hello App! Go to Foo Go to Bar // 1. 定义(路由)组件. // 可以从其他文件 import 进来 const Foo = { template: ...
Vue.js 从 Vue Router 0.7.x 迁移
从 Vue Router 0.7.x 迁移只有 Vue Router 2 是与 Vue 2 相互兼容的,所以如果你更新了 Vue ,你也需要更新 Vue Router .这也是我们在主文档中将迁移路 ...
你可能不清楚的 Vue Router 深度用法（二）
此为 Vue Router 深度用法的第二篇,主要讲述动态路由匹配用法.第一篇的链接在此: https://segmentfault.com/a/11... 动态路由匹配是用于把某种模式匹配到的所有路 ...
vue router html后缀,vue-router.html
Document Hello App! Go to Foo Go to Bar // 1. 定义(路由)组件. // 可以从其他文件 import 进来 const Foo = { template: ...
vue require css html,requirejs vue vue.router简单框架
index.html 入口页面html> vue `menu`.`name` base.js requirejs 配置文件(function(){ requirejs.config({ ...
Vue Router 4.0 正式发布！焕然一新。
关注若川视野,回复"pdf" 领取资料,回复"加群",可加群长期交流学习 12月8日,Vue Router 4 正式发布稳定版本. 在经历了 14 个 Alph ...
vue router 参数_Vue.js项目开发技术解析
Vue.js项目开发技术解析一.Vue.js实例在一个Vue.js工程中,用于显示内容最基层的实例称之为根实例.通过该实例可以进行页面或组件的更新和显示.对于项目本身而言,无论是什么样的页面,都要 ...
Vue Router的详细教程
Vue Router的详细教程安装 #直接下载 / CDN https://unpkg.com/vue-router/dist/vue-router.js Unpkg.com 提供了基于 NPM 的 ...