vuejs的路由功能

港控/mmm° 2022-05-24 04:53 190阅读 0赞

### 最简单的路由 ###

### 1，原理： ###

通过控制父组件一个路由变量的值，来动态改变指向的组件;

而被指向的组件又通过渲染方法被渲染到父组件中，因此当指向组件改变时，被渲染的组件也随之改变;

因此，就相当于通过控制一个变量来实现了路由的效果;

### 2，核心： ###

通过渲染方法来写，比较优雅。事实上也可以通过模板标签来写，但这样写的话，就会像之前解释渲染方法的用处一样，会写很多额外的代码（通过V-如果写在标签里，来判断到底渲染哪个组件）;

### 3，示例代码:(在官方示例上修改） ###

<!DOCTYPE html>
    <html>
    <head>
        <title>Vue的render方法说明</title>
        <script src="https://unpkg.com/vue@2.1.10/dist/vue.js"></script>
    </head>
    <body>
    <button onclick="change()">点击更改显示的路由组件</button>
    <br>
    <div id="app">
    
    </div>
    
    <script> const NotFound = {template: '<p>Page not found</p>'} // 被注释掉了这2行代码，也是可以生效的 // const Home = {template: '<p>home page</p>'} // const About = {template: '<p>about page</p>'} const Home = "input"; const About = "textarea"; const routes = { '/': Home, '/about': About } var demo = new Vue({ el: '#app', data: { currentRoute: "/" }, computed: { ViewComponent () { return routes[this.currentRoute] || NotFound } }, render (h) { return h(this.ViewComponent) } }) function change() { var r = demo.currentRoute if (r === '/') demo.currentRoute = '/about' else if (r === '/about') demo.currentRoute = "/a" else demo.currentRoute = "/" } </script>
    </body>
    </html>

### 4，代码解释： ###

。一个  路由的英文路由变量，他通过不同的键指向不同的标签名（或标签）;

湾  路由变量被引入计算属性ViewComponent中，和数据属性中的currentRoute进行绑定（因为是计算属性中的变量），

角  而ViewComponent被渲染方法的回调函数引入，作为渲染时的参数。

路由包含不同组件→currentRoute作为路线的键→currentRoute通过计算引入给ViewComponent→ViewComponent作为渲染方法的回调函数的参数;

从而通过改变currentRoute的值决定选用路线中的不同组件

--------------------

### 开始使用vue-router 2.0 ###

### 0，创建工程 ###

建议从这一步开始，重新创建一个新工程。
    特别是在自身代码基础上修改遇见bug的，从这一步出发比较稳妥。
    Node版本最好在6.X+，npm版本在3.X+
    
    先克隆一个webpack的vue项目，在命令行中输入以下代码（最后的my-webpack-simple-demo是你的项目名称，前面不要改）
    vue init webpack-simple my-webpack-simple-demo
    注意，如果在后来运行时，sass出现问题（比如我就遇见了，貌似是因为下载的问题），那么在启用sass那一步输入no
    
    创建好后，根据提示依次输入（注意提示，比如你项目名称不一样的话，cd这一步就不要完全照搬了）
    cd my-webpack-simple-demo
    npm install
    npm run dev
    此时，工程就可以跑起来了。在npm install这一步比较消耗时间
    
    运行npm run dev这一步命令后，浏览器会自动弹出窗口，如果能正常看到页面，说明一切正常。
    如果没有弹出窗口，打开浏览器，输入地址：http://localhost:8080/ 来查看，效果是一样的。
    如果看不到页面，一般情况下，是npm下载包的时候出错了，重新npm install吧

### 1，安装： ###

一个。通过脚本标签引入：

湾使用在工程中：

npm install vue-router -save
    先安装到工程中，
    然后在引入Vue的地方，同时引入vue-router，并且use这个vue-router，例如：
    import Vue from 'vue'
    import VueRouter from 'vue-router'
    Vue.use(VueRouter)
    以上这段代码，通常放在main.js中
    
    注意，如果是通过script标签引入，则无需Vue.use(VueRouter)这一步

### 2，在工程中使用 ###

（非工程中，即HMTL里使用有官方文档参考，我重点写当用在工程里时怎么启用）

一个。  首先，所有组件全部导入到一个路由设置文件里，例如  路由config.js  这个文件中。    
在这个文件中，引入所有组件（除根组件），然后可以将这些组件放入一个数组中，这个数组可以以如下形式存在：

//route-config.js
    
    import a from './components/a.vue'
    import b from './components/b.vue'
    
    export default [
        {path: '/a', component: a},
        {path: '/b', component: b}
    ]

关于其全部设置，参考[官方文档][Link 1]

最后将这个数组导出，如上面的代码

湾  在上一步中导出的对象，在main.js中引入;

角  在main.js中创建一个VueRouter对象，然后将上一步导入的对象在创建时导入给他，参数是路径，如以下代码：

import routeConfig from './route-config'
    
    // 创建 router 实例，然后传 `routes` 配置
    const router = new VueRouter({
        routes: routeConfig
    })

这样的话，就将这个路由设置绑定给了VueRouter对象，然而，我们还需要将VueRouter对象和Vue的公司的实例链接起来

d。  至今为止，我们让Vue公司的和的Vue的路由器绑定起来了，还有了一个描述路由的数组。那么，我们需要让这个路由对我们的组件生效起来。

我们还缺一个根组件，在之前通常App.vue作为根组件，因此，我们也将App.vue作为根组件，然而我们还需要导入路由，因此通过如下代码来完成：

const app = new Vue(Vue.util.extend({router}, App)).$mount('#app')

其中，Vue.util.extend这个方法的作用是起到混入的效果，即将App.vue的属性添加到路由器之中。然后将这个路由器传递给新创建的Vue的公司的实例。

然后通过安装$（'＃应用程序'）到挂载  `id="app"` 的DOM里

附上main.js的完整代码：

//main.js
    /* * 1. 先导入vue，再导入vue-router，然后调用Vue.use(VueRouter)来启用Vue-router插件 * 2. vue的路由设置是统一写在router-config这个文件里的， * 3. 将路由传给VueRouter的实例 * 4. 该实例里混入根组件，然后传递给Vue的实例 * 5. Vue实例挂载到页面之中 * */
    import Vue from 'vue'
    import VueRouter from 'vue-router'
    import routeConfig from './route-config'
    import App from './App.vue'
    Vue.use(VueRouter)
    
    // 创建 router 实例，然后传 `routes` 配置
    const router = new VueRouter({
        routes: routeConfig
    })
    
    // 4. 创建和挂载根实例。
    // 记得要通过 router 配置参数注入路由，
    // 从而让整个应用都有路由功能
    const app = new Vue(Vue.util.extend({router}, App)).$mount('#app')

### 3，补完基本内容 ###

在上一步，提到了a.vue和b.vue这两个子组件，创建他，随便写点什么即可，我们的目的是先让演示能跑起来，写好后放在组件文件夹下（因为路径指向那里，也可以放在其他地方，随便你，只要在进口时输入路径正确即可）

此时，我们的文件结构应该如下：

### vue-router 2.0的异步组件 ###

### 1，概述 ###

简单来说，异步组件指在需要的时候，才去下载那个组件而不是无论需要与否，都直接下载到本地。

假如一个页面有100个组件，用户访问这个页面时，显然不需要将所有组件都下载到本地，例如他刚进入这个页面时，只需要访问首部，登录，页脚这3个组件。

这个时候，我们就将其他97个组件变为异步组件，即只要在需要的时候，才从服务器将这些组件打包下载到本地。

异步组件要求使用  webpack，注意，Browserify  在默认情况下是不支持的，除非使用一些特殊的办法，具体请查看[官网说明][Link 2]。

### 2，方法 ###

在工程项目中，我们有一个路由设置文件，在这个文件里，我们引入了各种组件。

在那个路由设置文件里，我们引入了除了根组件之外的所有组件。

将组件设置为异步组件，只需要修改其引入组件的方式即可。

原代码：

import b from './components/b.vue'

使用异步组件的代码：

const b = resolve => require(['./components/b.vue'], resolve)

注：决心是组件中作为参数传递的回调函数。

附  路由config.js  文件完整代码（相对于同步组件，其他文件保持不变）

// 同步组件a
    import a from './components/a.vue'
    // import b from './components/b.vue'
    // 异步组件b
    // 异步写法如下
    const b = resolve => require(['./components/b.vue'], resolve)
    
    export default [
        {path: '/a', component: a},
        {path: '/b', component: b}
    ]

[Link 1]: http://router.vuejs.org/zh-cn/api/options.html
[Link 2]: https://cn.vuejs.org/v2/guide/components.html#%E5%BC%82%E6%AD%A5%E7%BB%84%E4%BB%B6