vue 构建单页应用

Today, we will be learning how to build a single page application using Vue.

今天，我们将学习如何使用Vue构建单页应用程序。

is a library for building interactive web interfaces. It provides data-reactive components with a simple and flexible API.

是用于构建交互式Web界面的库。 它通过简单灵活的API提供了对数据敏感的组件。

For the purpose of this tutorial, the term Vue refers to Vue 2.X versions unless stated otherwise.

就本教程而言，除非另有说明，否则术语Vue指的是Vue 2.X版本。

( )

Let's take a quick view at what we would be building:

让我们快速了解一下我们将要构建的内容：

This tutorial, however, hopes that you do understand:

但是，本教程希望您理解：

1.) The basics of . 2.) How to create Vue Components.

1.） 的基础知识。 2.）如何创建Vue组件。

( )

To get started easily, and also skip the process of configuring webpack for the compilation from ES6 to ES5, we would use the vue cli. If you do not have the Vue cli installed, we can install it by doing the following.

为了轻松上手，并且跳过配置用于从ES6到ES5的编译的webpack的过程，我们将使用vue cli 。 如果您尚未安装Vue cli，我们可以通过以下操作进行安装。

sudo npm install -g vue-cli

After installing the vue-cli, it is now time for us to create a vue project. To do that, we run the following command.

安装vue-cli之后，现在是时候创建一个vue项目了。 为此，我们运行以下命令。

Note: For the purpose of this tutorial, while running the command below, I chose no when asked for code linting.

注意：出于本教程的目的，在运行以下命令时，当要求输入代码时，我选择否 。

Code linting would make sure that codes are properly indented, as well as empty spaces are not left. But I like to leave empty spaces in my code, to keep it organized.

代码整理将确保代码正确缩进，并且不留空白。 但是我喜欢在代码中保留空白，以保持代码的井井有条。

vue init webpack spa

In the above command, we would notice two strange words which are webpack and spa.

在上面的命令中，我们会注意到两个奇怪的词，分别是webpack和spa 。

Webpack in this command refers to the name of the template we would like to scaffold, as the vue-cli helps us to scaffold templates. There are different templates to use, for more information on that, you can visit .

该命令中的Webpack指的是我们想要安装的模板的名称，因为vue-cli帮助我们安装了模板。 您可以使用不同的模板，有关更多信息，请访问 。

Spa in this command refers to the folder name for our application which would be created. After running the above code, we would need to change directory into our application, and install the modules:

此命令中的Spa是指将要创建的应用程序的文件夹名称。 运行上面的代码后，我们需要将目录更改到我们的应用程序中，并安装模块：

//change directory to the foldercd spa//install all required npm modules  npm install//run the development server  npm run dev

After running the above commands, if we go to , we should see this:

运行上述命令后，如果转到 ，则应该看到以下内容：

( )

Now we are set up and ready to start our single page application. However, we have one more dependency to install, named vue-router.

现在，我们已经准备就绪，可以启动我们的单页应用程序了。 但是，我们还有一个要安装的依赖项，名为vue-router 。

Vue-router is the official router for Vue. It deeply integrates with Vue.js core to make building Single Page Applications with Vue.js a breeze. Features include:

Vue路由器是Vue的官方路由器。 它与Vue.js核心深度集成，使使用Vue.js轻松构建单页应用程序变得轻而易举。 功能包括：

1. Nested route/view mapping
   嵌套路线/视图映射
2. Modular, component-based router configuration
   模块化，基于组件的路由器配置
3. Route params, query, wildcards
   路由参数，查询，通配符
4. View transition effects powered by Vue.js' transition system
   查看由Vue.js过渡系统提供动力的过渡效果
5. Fine-grained navigation control
   细粒度的导航控制
6. Links with automatic active CSS classes
   与自动活动CSS类的链接
7. HTML5 history mode or hash mode, with auto-fallback in IE9
   HTML5历史记录模式或哈希模式，在IE9中具有自动备用
8. Customizable Scroll Behavior
   可自定义的滚动行为

If you have done angular before, or you have any knowledge of angular, the vue-router is synonymous to the angular router or if you have any knowledge of react, it is also synonymous to the react-router.

如果您之前已经做过angular ，或者您对角度有任何了解，那么vue-router就是angular router同义词，或者如果您具有react知识，那么它也就是react-router同义词。

The main reason for which we use vue-router is because it allows us to switch between pages/routes without our page been refreshed/reloaded.

我们使用vue-router的主要原因是因为它允许我们在页面/路由之间进行切换，而无需刷新/重新加载页面。

That been said, let us look at how we can install it.

话虽如此，让我们看看如何安装它。

We can install it by running the following command.

我们可以通过运行以下命令来安装它。

npm install vue-router --save

Now let's head into our src/main.js to configure the application to use the router.

现在，让我们进入src/main.js来配置应用程序以使用路由器。

Copy and replace the contents of src/main.js to this:

将src/main.js的内容复制并替换为以下内容：

// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.//import the vue instanceimport Vue from 'vue'//import the App componentimport App from './App'//import the vue routerimport VueRouter from 'vue-router'//tell vue to use the routerVue.use(VueRouter)//define your routesconst routes = []// Create the router instance and pass the `routes` option// You can pass in additional options here, but let's// keep it simple for now.const router = new VueRouter({
       routes, // short for routes: routes  mode: 'history'})//instatinat the vue instancenew Vue({
     //define the selector for the root component  el: '#app',  //pass the template to the root component  template: '
    ',  //declare components that the root component can access  components: {
      App },  //pass in the router to the Vue instance  router}).$mount('#app')//mount the router on the app

Let's take a fast look at the above code. We imported the Vue class from our node modules, we then also imported the App component.

让我们快速看一下上面的代码。 我们从节点模块导入了Vue类，然后还导入了App组件。

The app component is the default component created by the vue cli. We, however, import it to be used as our root component.

应用程序组件是vue cli创建的默认组件。 但是，我们将其导入以用作我们的根组件。

After this, we then import the Vue router, and then tell the Vue class that it can use the vue router by doing vue.use(vuerouter).

之后，我们导入Vue路由器，然后通过执行vue.use(vuerouter)告诉Vue类它可以使用vue路由器。

In the next line, we define a constant called routes and for now, we set it to an empty array. However, the routes are supposed to be an array of objects, where each object represent a path. We, however, would see more to this very soon.

在下一行中，我们定义一个称为路由的常量，现在，将其设置为一个空数组。 但是，路由应该是一个对象数组，其中每个对象代表一条路径。 但是，我们很快会看到更多。

The next thing we do is to create our router. An instance of the Vue router, which we pass in two parameters to it.

我们要做的下一步是创建路由器。 Vue路由器的实例，我们将两个参数传递给它。

The first parameter being the routes array we have declared above, and the other one, being the mode. The mode parameter, however, was passed so as to prevent our URL'S from having the # sign in them, which has also proven not to be good for SEO purposes when URL'S have the # in them.

第一个参数是我们在上面声明的routes数组，另一个是mode。 该mode的参数，但是，传递，以防止我们的URL'S从具有#在他们的标志，这也被证明不是为搜索引擎优化的目的，好当的URL有#在其中。

After all of this, we create a new Vue instance, in which we pass in the details of our root component, as well as declare the mounting point of the router.

完成所有这些之后，我们创建一个新的Vue实例，在其中我们传入根组件的详细信息，并声明路由器的安装点。

At this point, if we re-serve our application, we would notice that nothing seems to have changed. However, we now have our router set up.

在这一点上，如果我们保留应用程序，我们会发现似乎没有任何改变。 但是，我们现在已经设置了路由器。

The next step to take now would be to replace the content of our App component with the router outlet, where every component matched with our view will be rendered, using the <router-view></router-view> tags.

现在要采取的下一步是将我们的App组件的内容替换为路由器出口，其中将使用<router-view></router-view>标签呈现与我们的视图匹配的每个组件。

Now open your src/App.vue file and replace it with the following content:

现在打开src/App.vue文件，并将其替换为以下内容：

If we look at the above code, we would notice some differences from the code which was auto-generated there, these differences include:

如果我们看一下上面的代码，我们会注意到与此处自动生成的代码存在一些差异，这些差异包括：

1. The router-view tag that was placed inside the template, for rendering views.
   放置在模板内的router-view标记，用于呈现视图。
2. The removal of the import statement for the hello component.
   删除hello组件的import语句。
3. The removal of the component block in the script tag itself.
   删除脚本标签本身中的组件块。

The removed components were removed because it wasn't needed anymore, but the most important one is the router view tag which was added, as discussed above.

删除的组件已删除，因为不再需要它，但是最重要的一个组件是添加的路由器视图标签，如上所述。

At this point, if we reload our app, we would get an empty page.

此时，如果我们重新加载我们的应用程序，则会得到一个空白页面。

( )

Now let's go ahead to add the hello component as our component for the home page and also add the path to our routes array.

现在，让我们继续将hello组件添加为主页的组件，并将路径添加到路由数组。

Open up your main.js file, and replace the block that holds the routes constant with this:

打开您的main.js文件，并用以下代码替换保持路由恒定的块：

//import the hello componentimport Hello from './components/Hello'//define your routesconst routes = [//define the root url of the application.{
      path: '/', component: Hello }]

If we look at the above code, we have imported the hello component that comes by default and assigned the path as the component that handles our root path, and as such, if we reload our page, we should see this now:

如果我们看上面的代码，我们导入了默认情况下的hello组件，并将该路径分配为处理根路径的组件，因此，如果我们重新加载页面，现在应该看到以下内容：

We would notice from the image above that the logo of Vue, does not appear again, that is because we had removed the image when we were replacing the content of App component.

从上图可以看到，Vue的徽标没有再出现，这是因为在替换App component的内容时我们已经删除了该图。

Now let's define one more route, and as such, let's create one more component.

现在，我们再定义一条路线，因此，我们再创建一个组件。

So create a file inside the src/components folder called About.vue and let's place the following into it.

因此，在src/components文件夹中创建一个名为About.vue文件，然后将以下内容放入其中。

Now let's look at the above component. The component holds some text inside the template, which would be rendered once we get to the link of the about page. However, we would still need to add the new component and path to our routes before it can be viewed.

现在让我们看一下上面的组件。 该组件在模板中包含一些文本，一旦我们到达about页面的链接，这些文本就会呈现出来。 但是，我们仍然需要在路由中添加新的组件和路径，然后才能对其进行查看。

To do that, open your main.js and replace the routes constant block with the following:

为此，请打开main.js并用以下内容替换routes常量块：

//import the hello componentimport Hello from './components/Hello'//import the about componentimport About from './components/About'//define your routesconst routes = [//route for the home route of the web page{
      path: '/', component: Hello },//route for the about route of the web page{
      path: '/about', component: About }]

In the above code, The only difference now is that we have imported the about component, and also added the route to our path.

在上面的代码中，唯一的区别是我们已经导入了about组件，并且还将路由添加到了我们的路径中。

If we now navigate to , we would see that our about text is being rendered.

如果现在导航到 ，我们将看到呈现了About文本。

( )

However, this is not what we want to do. The aim of a single page application is such that the page does not reload again. For us to accomplish this, we would need to use the <router-link></router-link> tag.

但是，这不是我们想要做的。 单个页面应用程序的目的是使页面不会再次重新加载。 为了实现此目的，我们需要使用<router-link></router-link>标记。

Let us open our App.vue file, and then add a router link to it. so before the declaration of our <router-view></router-view> in the component, let's add two router links:

让我们打开App.vue文件，然后向其添加路由器链接。 因此，在组件中声明<router-view></router-view> ，让我们添加两个路由器链接：

    
     Home
    
    
     About
    

What the above code does is that it would create two anchor tags for us, and do the dynamic routing, such that the page doesn't reload.

上面的代码所做的是，它将为我们创建两个锚标记，并进行动态路由，以使页面不会重新加载。

If you reload your app, we would notice two new links added to it. On click of those links, the view is changed, and the page does not reload.

如果您重新加载您的应用程序，我们会注意到其中添加了两个新链接。 单击这些链接后，视图将更改，并且该页面不会重新加载。

At this point, your application should look like what we have below.

此时，您的应用程序应如下所示。

In the image below, notice the two links placed above, and that the page does not reload.

在下图中，请注意上方的两个链接，并且该页面不会重新加载。

( )

Viola, This is how to create a simple single page application.

Viola，这是创建简单的单页应用程序的方法。

However, you can make it more complex by:

但是，您可以通过以下方法使其更复杂：

1. Adding more Routes
   添加更多路线
2. Passing parameters alongside the routes
   在路线旁边传递参数
3. Using route guards to protect routes where non-authenticated users can visit.
   使用路由防护器保护未经身份验证的用户可以访问的路由。

In the next part of this tutorial, we would visit passing of parameters, as well as using route guards to guard your Application.

在本教程的下一部分中，我们将访问参数的传递，以及使用路由防护来保护您的应用程序。

翻译自:

vue 构建单页应用