如何使用 Vue 2 构建简单的单页应用程序(第 2 部分)

10年服务1亿前端开发工程师

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

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

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

我们将构建什么

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

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

完整的示例代码:https://github.com/samuelayo/vue-spapt2

传递路径参数

在 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 路由。然而,还有一个步骤,以便该路由可以与 abouthome 链接一起显示。

在我们的 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' }
    ]

请注意,最后一