本教程的第1部分中讨论了构建单页应用程序的基础知识，页面链接由 Vue 自动完成。 在本教程中，您将学习如何：

• 传递路径参数
• 使用路由保护，设置未经认证的用户可访问路由。

从上一个教程结束开始，你可以打开 ，克隆并继续完成应用程序。

我们将构建什么

你将在第1部分完成的项目基础上构建，添加导航保护和传递路径参数。

这是我们将要构建的示例图。

完整的示例代码：

传递路径参数

在 Vue 中，可以通过简单地将 : 符号放在参数名称之前将参数传递给 route(路由) 。这与 Laravel 中的路由机制有些相似。如果你熟悉 Laravel ，{} 注释用于指定路由。

看下面来自 Vue router 文档的例子。

{ path: '/user/:id', component: User } 

从这个例子来看，可以看出 route(路由) 将给出类似于 /users/2 的结果，或任何整数代替 2。无论参数保存的是什么内容，都是对 “id” 的引用，你可以在 User 组件中使用 $route.params.id 来访问它，这被声明为路由的组成部分。 让我们开始！

创建参数路由

在 src\components 文件夹中创建一个名为 Param.vue 的新组件，并将以下内容复制到其中：

//src\components\Param.vue
export default {
    name: 'Param',
    data () {
        return {
        UserInput :''
        }

    }, 
    methods:{
        GoToRoute : function(){
        this.$router.push({ name: 'Paramdetails', params: { id: this.UserInput }})
        }
    }
}

在上面的代码中，定义了一个 Param 组件，他的 template(模板) 中有文本框和按钮。

现在，转到 main.js 文件，导入 Param 组件，以及创建一个处理路由的路径。

就在 Const routes 代码块之上，添加以下 import(导入) ：

//main.js
import Param from './components/Param 

执行上述操作并导入 Param 组件后，用以下代码替换 routes 代码块：

//main.js
//定义路由
const routes = [
    // 主页路由
    { path: '/', component: Hello },
    // about 页面路由
    { path: '/about', component: About }, 
    // 参数页面路由
    { path: '/param', component: Param }
]

注意在上面的代码中，唯一的区别是添加了 param 路由。然而，还有一个步骤，以便该路由可以与 about 和 home 链接一起显示。

在我们的 App.vue 文件中使用 <router -link></router> (路由链接) 标签，并添加以下代码行，
就在“about”链接之后：

<!--src\components\App.vue-->
<router-link v-bind:to="'/param'">Param Link</router-link>

打开主页看看，应该是这样的：

请注意，param link 就在 “about” 链接之后。点击这个链接，您应该看到以下内容：

在开发人员的工具中打开控制台。 如果您点击按钮，您可能会遇到此错误:

[vue-router] Route with name 'Paramdetails' does not exist

这是因为，在上面的代码中，附加在按钮的方法触发下面这段代码：

this.$router.push({ name: 'Paramdetails', params: { id: this.UserInput }})

我们没有定义任何名为 paramdetails 的 route(路由) 来接收参数。

下一步是创建处理 route(路由) 的组件。在 src/components 中创建一个名为 paramedetails.vue 的新文件，并将以下内容粘贴到其中。

<!--src/components/paramdetails.vue-->
    The paremeter value that was passed to me is: {{ $route.params.id }}

    export default {
    name: 'paramdetails'
    }

这将创建一个有 span 元素的组件，同事打印出传递给它的参数。为了能正常工作，将这个新的组件添加到 route(路由) 中。

就在 Const routes 代码块之上，添加下面的 import(导入) 语句：

// main.js
// 导入 paramdetails 组件
import paramdetails from './components/paramdetails'

按上述操作后，导入 paramdetails 组件，替换 routes 代码块：

 //main.js
   //define your routes
    const 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 }, 
    //route for the param route of the web page
    { path: '/param', component: Param },
    //route for the paramdetails passing in params
    { path: '/Paramdetails/:id', component: paramdetails, name: 'Paramdetails' }
    ]

请注意，最后一条 route(路由) 有两个新的调整，在其他 route(路由) 上没有变化。 第一个调整是 :id，这是你所传递的 route(路由) 占位符。第二个调整是在 route(路由) 对象中添加了 name 选项。

要了解对象中的 name 属性，就像你所知道的任何其他 route(路由) 一样，Vue router 包含命名路由的概念。这样就不需要记住新路由的完整URL，我们可以通过命名路由的较短方式来调用该路由。另外，回顾一下 Param 组件中的 GoToRoute 方法，你会看到路由器对象被推送，他就是通过名称标识路由的。

现在，点击 param link 链接，例如在文本框中输入 52 。然后点击 go to route 按钮，你应该看到这样一个页面：

这就对了！ 你刚刚传递了你的第一个路径参数到组件。 超级容易，不是吗？

使用路由保护

路线保护是一个 watcher ，监视路由的变化并执行一些操作，在路由转换到下一个路由之前，或在路由已经转换之后。路由保护可以用来一些路由免受未认证的用户的访问。Vue router 有全局的路由保护，每条路由保护，以及组件保护。

Vue router 提供的全局路由保护有两种，分别是：beforeEach 和 afterEach 。顾名思义，在新路由转换之前执行 “beforeEach” , 而转换之后执行 “afterEach” 保护。

单独每条路由保护可以作为回调添加到要保护的特定路由的路由对象中，而 “in-component” 保护在处理这些路由的组件中定义。为了本教程的目的，我们使用 “beforeEach” 全局路由保护。

打开 main.js 文件，并且在 routes 常量之后，添加以下内容：

//main.js
// 防止路由保护
router.beforeEach((to, from, next) => {
    // 检查路径用户是否即将进入我们的 param 路径
    if(to.path == '/param'){
        // 检查用户是否已经设置
        if(localStorage.getItem('user')==undefined){
            // username 提示
            var user = prompt('please enter your username');
            // password 提示
            var pass = prompt('please enter your password');
            // 检查给定的用户名和密码是否等于我们的预设信息
            if (user == 'username' && pass == 'password'){
                // 设置 user
                localStorage.setItem('user', user);
                // 进入路由
                next();
            }else{
                // 警报用户名错误
                alert('Wrong username and password, you do not have permission to access that route');
                // return, 不进入路由
                return;
            }

        }

    }

    next()
})

router.beforeEach 函数被调用，它需要由 Vue router 传递三个参数给它。to 参数是指要访问的路径的对象，而 from 参数是指先前路径的对象。

检查 to.path 是否为 /param，这是要保护的路由的路径。如果to.path 和要保护的路径一致，检查 “localStorage” 数据中保存的用户详细信息，查看是否定义。如果 “localStorage” 数据没有定义，提示输入用户名和密码，并创建 “localStorage” 数据。如果 “localStorage” 数据被定义，该函数继续，路由对用户可见。

注意：next 函数必须调用，以便路由可以将用户处理到下一个页面。如果没有调用该函数，一个空白页可能会出现。
在本教程中， username 和 password 的原始字符串用于验证详细信息。但是，还可以做更多的事情，例如通过服务器请求认证用户。

结论

您现在应该能够将参数传递给路由，知道什么是命名路由，以及如何创建它们。另外还有，路由保护的类型，并介绍了 “beforeEach” 路由保护的实现。

现在，您应该能够创建一个单页应用程序了，注册路由，将参数传递给路由，以及保护路由。 在这些场景中，您可以开始构建出极好的单页应用程序。

完整的示例代码：

原文链接：